├── .gitignore ├── LICENSE ├── README.md ├── package.json ├── src └── cli.ts ├── templates └── default │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ ├── index.tsx │ └── {{capital name}}.tsx │ ├── test-project │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── Comp.tsx │ │ └── index.tsx │ ├── tsconfig.json │ └── vite.config.ts │ ├── tsconfig.json │ └── vite.config.ts └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | /dist 2 | package-lock.json 3 | yarn.lock 4 | 5 | # Created by https://www.gitignore.io/api/node 6 | # Edit at https://www.gitignore.io/?templates=node 7 | 8 | ### Node ### 9 | # Logs 10 | logs 11 | *.log 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | lerna-debug.log* 16 | 17 | # Diagnostic reports (https://nodejs.org/api/report.html) 18 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 19 | 20 | # Runtime data 21 | pids 22 | *.pid 23 | *.seed 24 | *.pid.lock 25 | 26 | # Directory for instrumented libs generated by jscoverage/JSCover 27 | lib-cov 28 | 29 | # Coverage directory used by tools like istanbul 30 | coverage 31 | *.lcov 32 | 33 | # nyc test coverage 34 | .nyc_output 35 | 36 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 37 | .grunt 38 | 39 | # Bower dependency directory (https://bower.io/) 40 | bower_components 41 | 42 | # node-waf configuration 43 | .lock-wscript 44 | 45 | # Compiled binary addons (https://nodejs.org/api/addons.html) 46 | build/Release 47 | 48 | # Dependency directories 49 | node_modules/ 50 | jspm_packages/ 51 | 52 | # TypeScript v1 declaration files 53 | typings/ 54 | 55 | # TypeScript cache 56 | *.tsbuildinfo 57 | 58 | # Optional npm cache directory 59 | .npm 60 | 61 | # Optional eslint cache 62 | .eslintcache 63 | 64 | # Optional REPL history 65 | .node_repl_history 66 | 67 | # Output of 'npm pack' 68 | *.tgz 69 | 70 | # Yarn Integrity file 71 | .yarn-integrity 72 | 73 | # dotenv environment variables file 74 | .env 75 | .env.test 76 | 77 | # parcel-bundler cache (https://parceljs.org/) 78 | .cache 79 | 80 | # next.js build output 81 | .next 82 | 83 | # nuxt.js build output 84 | .nuxt 85 | 86 | # react / gatsby 87 | public/ 88 | 89 | # vuepress build output 90 | .vuepress/dist 91 | 92 | # Serverless directories 93 | .serverless/ 94 | 95 | # FuseBox cache 96 | .fusebox/ 97 | 98 | # DynamoDB Local files 99 | .dynamodb/ 100 | 101 | # End of https://www.gitignore.io/api/node 102 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2022 Blusk 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 14 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 15 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 16 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 17 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 18 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE 19 | OR OTHER DEALINGS IN THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Create Solid Library 2 | 3 | Create SolidJS libraries with ease! 4 | 5 | ## Usage 6 | 7 | ```bash 8 | npx create-solid-library 9 | ``` 10 | 11 | ### Development 12 | 13 | Developing components is often a visual process. As a result, vite is being used as a build tool and as a dev environment! 14 | Just run `npm run dev` and you can live code your component. 15 | 16 | #### Excluding Dependencies 17 | 18 | At build time, Vite unfortunately cannot exclude dependencies automatically. Dependencies you install need to be [externalized](https://vitejs.dev/guide/build.html#library-mode) so that it doesn't appear in the final bundle! 19 | 20 | ### Testing your component works 21 | 22 | Oftentimes, there can be issues that only appear after build time. As a result, we added a `test-project` folder where you can use your Solid component and test if it 23 | actually works in a real project! 24 | 25 | ### Building for production 26 | 27 | ```bash 28 | npm run build 29 | ``` 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-solid-library", 3 | "description": "Create SolidJS libraries with ease", 4 | "version": "0.0.3", 5 | "author": "Blusk ", 6 | "scripts": { 7 | "build": "tsup src/cli.ts --minify", 8 | "clean": "shx rm -rf lib", 9 | "dev": "tsup src/cli.ts --watch", 10 | "prepublishOnly": "npm run clean && npm run build" 11 | }, 12 | "bin": "dist/cli.js", 13 | "files": [ 14 | "dist", 15 | "templates" 16 | ], 17 | "devDependencies": { 18 | "@types/node": "^17.0.29", 19 | "shx": "^0.3.4", 20 | "tsup": "^5.12.1", 21 | "typescript": "^4.6.3" 22 | }, 23 | "license": "MIT", 24 | "dependencies": { 25 | "create-create-app": "^7.3.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/cli.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | import { create } from "create-create-app"; 4 | import { resolve } from "path"; 5 | 6 | const templateRoot = resolve(__dirname, "..", "templates"); 7 | 8 | // See https://github.com/uetchy/create-create-app/blob/master/README.md for other options. 9 | 10 | create("create-solid-library", { 11 | templateRoot, 12 | promptForEmail: false, 13 | promptForPackageManager: true, 14 | after: () => console.log(`Enjoy building your library!`), 15 | }); 16 | -------------------------------------------------------------------------------- /templates/default/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist -------------------------------------------------------------------------------- /templates/default/README.md: -------------------------------------------------------------------------------- 1 | # {{name}} 2 | 3 | {{description}} 4 | -------------------------------------------------------------------------------- /templates/default/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Solid App 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /templates/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "{{name}}", 3 | "version": "0.0.0", 4 | "description": "{{description}}", 5 | "main": "./dist/{{name}}.umd.js", 6 | "module": "./dist/{{name}}.es.js", 7 | "types": "./dist/{{name}}.es.d.ts", 8 | "exports": { 9 | ".": { 10 | "import": "./dist/{{name}}.es.js", 11 | "require": "./dist/{{name}}.umd.js" 12 | }, 13 | "./dist/*": "./dist/*" 14 | }, 15 | "files": [ 16 | "dist" 17 | ], 18 | "scripts": { 19 | "dev": "vite", 20 | "build": "vite build", 21 | "serve": "vite preview" 22 | }, 23 | "license": "{{license}}", 24 | "devDependencies": { 25 | "typescript": "^4.8.2", 26 | "vite": "^3.0.9", 27 | "vite-plugin-dts": "^1.6.6", 28 | "vite-plugin-solid": "^2.3.0" 29 | }, 30 | "dependencies": { 31 | "solid-js": "^1.5.1" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /templates/default/src/index.tsx: -------------------------------------------------------------------------------- 1 | import type { Component } from "solid-js"; 2 | /* @refresh reload */ 3 | import { render } from 'solid-js/web'; 4 | 5 | import { {{capital name}} } from './{{capital name}}' 6 | 7 | const App: Component = () => { 8 | return ( 9 | <> 10 |

{{capital name}}

11 | <{{capital name}} /> 12 | 13 | ); 14 | }; 15 | 16 | render(() => , document.getElementById("root") as HTMLElement); 17 | -------------------------------------------------------------------------------- /templates/default/src/{{capital name}}.tsx: -------------------------------------------------------------------------------- 1 | export const {{capital name}} = () => { 2 | return

Hello!

3 | } -------------------------------------------------------------------------------- /templates/default/test-project/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist -------------------------------------------------------------------------------- /templates/default/test-project/README.md: -------------------------------------------------------------------------------- 1 | ## Usage 2 | 3 | Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`. 4 | 5 | This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template. 6 | 7 | ```bash 8 | $ npm install # or pnpm install or yarn install 9 | ``` 10 | 11 | ### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs) 12 | 13 | ## Available Scripts 14 | 15 | In the project directory, you can run: 16 | 17 | ### `npm dev` or `npm start` 18 | 19 | Runs the app in the development mode.
20 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 21 | 22 | The page will reload if you make edits.
23 | 24 | ### `npm run build` 25 | 26 | Builds the app for production to the `dist` folder.
27 | It correctly bundles Solid in production mode and optimizes the build for the best performance. 28 | 29 | The build is minified and the filenames include the hashes.
30 | Your app is ready to be deployed! 31 | 32 | ## Deployment 33 | 34 | You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.) 35 | -------------------------------------------------------------------------------- /templates/default/test-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Solid App 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /templates/default/test-project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-template-solid", 3 | "version": "0.0.0", 4 | "description": "", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "serve": "vite preview" 9 | }, 10 | "license": "MIT", 11 | "devDependencies": { 12 | "typescript": "^4.8.2", 13 | "vite": "^3.0.9", 14 | "vite-plugin-solid": "^2.3.0" 15 | }, 16 | "dependencies": { 17 | "solid-js": "^1.5.1", 18 | "{{name}}": "file:.." 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /templates/default/test-project/src/App.tsx: -------------------------------------------------------------------------------- 1 | import type { Component } from 'solid-js'; 2 | import Comp from './Comp'; 3 | 4 | const App: Component = () => { 5 | return ( 6 | <> 7 |

Hello world!!!!

8 | 9 | 10 | ); 11 | }; 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /templates/default/test-project/src/Comp.tsx: -------------------------------------------------------------------------------- 1 | export default () => { 2 | return

Hello world!!!

; 3 | }; 4 | -------------------------------------------------------------------------------- /templates/default/test-project/src/index.tsx: -------------------------------------------------------------------------------- 1 | /* @refresh reload */ 2 | import { render } from 'solid-js/web'; 3 | 4 | import App from './App'; 5 | 6 | render(() => , document.getElementById('root') as HTMLElement); 7 | -------------------------------------------------------------------------------- /templates/default/test-project/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "module": "ESNext", 5 | "moduleResolution": "node", 6 | "allowSyntheticDefaultImports": true, 7 | "esModuleInterop": true, 8 | "jsx": "preserve", 9 | "jsxImportSource": "solid-js", 10 | "types": ["vite/client"], 11 | "noEmit": true, 12 | "isolatedModules": true 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /templates/default/test-project/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import solidPlugin from 'vite-plugin-solid'; 3 | 4 | export default defineConfig({ 5 | plugins: [solidPlugin()], 6 | server: { 7 | port: 3000, 8 | }, 9 | build: { 10 | target: 'esnext', 11 | }, 12 | }); 13 | -------------------------------------------------------------------------------- /templates/default/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "module": "ESNext", 5 | "moduleResolution": "node", 6 | "allowSyntheticDefaultImports": true, 7 | "esModuleInterop": true, 8 | "jsx": "preserve", 9 | "jsxImportSource": "solid-js", 10 | "types": ["vite/client"], 11 | "noEmit": true, 12 | "isolatedModules": true 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /templates/default/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import solidPlugin from "vite-plugin-solid"; 3 | import dts from "vite-plugin-dts"; 4 | 5 | export default defineConfig({ 6 | plugins: [ 7 | solidPlugin(), 8 | dts({ 9 | insertTypesEntry: true, 10 | exclude: ["node_modules/**", "test-project/node_modules/**"], 11 | }), 12 | ], 13 | server: { 14 | port: 3000, 15 | }, 16 | build: { 17 | target: "esnext", 18 | lib: { 19 | entry: "./src/{{capital name}}.tsx", 20 | name: "{{capital name}}", 21 | fileName: (format) => `{{name}}.${format}.js`, 22 | formats: ["es", "umd"], 23 | }, 24 | rollupOptions: { 25 | external: ["solid-js"], 26 | }, 27 | }, 28 | }); 29 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "exclude": ["dist"], 3 | "compilerOptions": { 4 | "target": "es2018" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */, 5 | "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */, 6 | "declaration": true /* Generates corresponding '.d.ts' file. */, 7 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 8 | "outDir": "./dist" /* Redirect output structure to the directory. */, 9 | "rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */, 10 | "strict": true /* Enable all strict type-checking options. */, 11 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies */ 12 | } 13 | } 14 | --------------------------------------------------------------------------------