SaaSHub helps you find the best software and product alternatives Learn more →
Top 23 TypeScript Webpack Projects
-
storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
tamagui
Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.
-
nebular
:boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
-
modern.js
Modern.js is a web engineering system, including a web framework and a npm package solution.
-
-
-
-
-
-
-
-
-
fork-ts-checker-webpack-plugin
Webpack plugin that runs typescript type checker on a separate process.
-
-
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
But here’s some good news: there’s already a solution in the JavaScript world called Storybook!
Project mention: Is there any github repo or something for medium or advanced level project in Angular that I can run in my local and learn something from that ?? | /r/Angular2 | 2023-09-06I learned a lot from the ngx-admin template but if you want a real world project PeerTube's Web app written in Angular you can check it out here
Project mention: How I Used Electron and React to Create a Sweet UI for FFMPEG | dev.to | 2023-12-15For a swift and efficient setup, I began by cloning the Electron-React Boilerplate. This boilerplate provided a pre-configured combination of Electron and React, along with Redux and Webpack, setting a solid foundation for the project. This choice allowed me to focus on building the unique features of my application, leveraging the boilerplate's stable and community-tested framework.
Project mention: Nx + NextJS + Docker - The Nx way: Creating the NextJS application | dev.to | 2023-06-27//@ts-check // eslint-disable-next-line @typescript-eslint/no-var-requires const { composePlugins, withNx } = require('@nx/next'); /** * @type {import('@nx/next/plugins/with-nx').WithNxOptions} **/ const nextConfig = { nx: { // Set this to true if you would like to use SVGR // See: https://github.com/gregberge/svgr svgr: false, }, }; const plugins = [ // Add more Next.js plugins to this list if needed. withNx, ]; module.exports = composePlugins(...plugins)(nextConfig);
You can check out the site for Tamagui here.
Nebular (MIT license)
Project mention: Electron Code Signing: Using SSL.com codeSignTool for EV code signing | dev.to | 2024-05-09const config: ForgeConfig = { packagerConfig: { asar: true, icon: './build/icon', name: 'My App', appBundleId: 'com.myApp.electron', usageDescription: { Camera: 'App requires access to your camera for complete experience.', }, }, rebuildConfig: {}, makers: [ new MakerSquirrel((arch) => ({ // Make sure app name without space, see @https://github.com/electron/forge/issues/3462 name: appName.replace(' ', '-'), authors: 'Myself Inc', description: 'My Desktop app' })), ], hooks: { postMake: async (config, makeResults) => { if (process.platform === 'darwin') { return makeResults; } else { // Window machine runs this block makeResults.map((result) => { const TEMP_DIR = path.join(__dirname, 'release', 'temp'); if (!fs.existsSync(TEMP_DIR)) { fs.mkdirSync(TEMP_DIR, { recursive: true }); } result.artifacts.forEach((artifact) => { if (artifact.endsWith('.exe')) { console.log('===> Signing', artifact); const { name, dir } = path.parse(artifact); // CodeSignTool can't sign in place without verifying the overwrite with a // y/m interaction so we are creating a new file in a temp directory and // then replacing the original file with the signed file. const tempFile = path.join(TEMP_DIR, name); const setDir = `cd ./CodeSignTool/CodeSignTool-v1.2.7-windows`; // depending on where your codeSignTool is located const signFile = `CodeSignTool sign -input_file_path="${artifact}" -output_dir_path="${TEMP_DIR}" -credential_id="${process.env.WIN_SIGN_CREDENTIAL_ID}" -username="${process.env.WIN_SIGN_USERNAME}" -password="${process.env.WIN_SIGN_PASSWORD}" -totp_secret="${process.env.WIN_SIGN_TOTP}"`; const moveFile = `mv "${tempFile}" "${dir}"`; childProcess.execSync(`${setDir} && ${signFile} && ${moveFile}`, { stdio: 'inherit', }); } }); return result; }); return makeResults; } } } };
Project mention: Initializing a Project with Any Git Repository - Code Recycle | dev.to | 2024-03-18changeList: - type: copy from: https://github.com/maximegris/angular-electron.git to: ./ae source: git
Modern.js framework
Documentation
Project mention: Vue 3 vs Vue 2 so far? What's your opinion? Things I didn't like about Vue 3 compared to Vue 2 | /r/vuejs | 2023-06-02
Project mention: To learn svelte, I clone Github's issues page including useful features that you might consider reusing. | /r/sveltejs | 2023-12-05🤹 Unplugin Icons
It'll be a little different than your typical "what is webpack?" article in that I write this as the maintainer of ts-loader, a loader used for integrating TypeScript with webpack. I've worked in the webpack ecosystem for some years now, and I'll share some of my experiences with you.
Project mention: Coming here from svelteland... is there a way to put CSS module inside JS? | /r/solidjs | 2023-06-03I recently encountered Vue Macros and it inspired me to create a compile-time macro library for CSS modules, unfortunately I haven't even started and am not planning to do so any time soon. I like having the entire component in a single file but honestly just having COMPONENT_NAME.module.css for each component is not bad at all. I'd just avoid doing the COMPONENT_NAME/style.module.css, this gets very tedious
I'm not trying to call a particular org or library out, because I think the ones I've been digging through (and prompted me to write this) are very high quality. It's vanilla-extract (a build-time CSS-in-JS library) and Braid Design System (built on vanilla-extract).
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
TypeScript Webpack related posts
-
How to share your TwigComponent with your team ?
-
Electron Code Signing: Using SSL.com codeSignTool for EV code signing
-
How to use NextJS pathname in Storybook 8
-
Storybook not picking up tailwindcss
-
Bridging Analog to Angular with esbuild and Vite
-
Add Cypress, Playwright, and Storybook to Nx Expo Apps
-
webpack adoption guide: Overview, examples, and alternatives
-
A note from our sponsor - SaaSHub
www.saashub.com | 16 May 2024
Index
What are some of the best open-source Webpack projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | storybook | 82,947 |
| 2 | ngx-admin | 25,058 |
| 3 | electron-react-boilerplate | 22,710 |
| 4 | svgr | 10,337 |
| 5 | tamagui | 10,110 |
| 6 | nebular | 8,016 |
| 7 | forge | 6,272 |
| 8 | angular-electron | 5,583 |
| 9 | vue-loader | 4,977 |
| 10 | modern.js | 4,169 |
| 11 | after.js | 4,131 |
| 12 | unplugin-vue-components | 3,536 |
| 13 | esbuild-loader | 3,522 |
| 14 | unplugin-icons | 3,544 |
| 15 | ts-loader | 3,427 |
| 16 | unplugin | 2,829 |
| 17 | webpack-merge | 2,666 |
| 18 | webpackbar | 2,047 |
| 19 | compiled | 1,965 |
| 20 | clean-webpack-plugin | 1,959 |
| 21 | fork-ts-checker-webpack-plugin | 1,923 |
| 22 | vue-macros | 1,610 |
| 23 | braid-design-system | 1,475 |
Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com