├── .github ├── dependabot.yml └── workflows │ ├── bump-version.yml │ └── npm-publish.yml ├── .gitignore ├── LICENSE ├── README.md ├── bin └── create-tool.js ├── package.json ├── template ├── .gitignore ├── README.md ├── index.html ├── package.json ├── src │ ├── Globals.d.ts │ ├── index.module.css │ ├── index.ts │ └── types │ │ └── index.ts ├── tsconfig.json └── vite.config.js └── yarn.lock /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: "npm" 4 | directory: "/template" 5 | schedule: 6 | interval: "daily" -------------------------------------------------------------------------------- /.github/workflows/bump-version.yml: -------------------------------------------------------------------------------- 1 | name: Auto bump version 2 | 3 | on: 4 | pull_request: 5 | branches: 6 | - main 7 | - master 8 | 9 | jobs: 10 | # If pull request was merged then we should check for a package version update 11 | check-for-no-version-changing: 12 | runs-on: ubuntu-latest 13 | steps: 14 | # Checkout to target branch 15 | - uses: actions/checkout@v2 16 | with: 17 | fetch-depth: 0 18 | 19 | # Get package new version name 20 | - name: Get package info 21 | id: packageNew 22 | uses: codex-team/action-nodejs-package-info@v1 23 | 24 | # Checkout to the base commit before merge 25 | - name: Checkout to the base commit before merge 26 | run: git checkout ${{ github.event.pull_request.base.sha }} 27 | 28 | # Get package old version name 29 | - name: Get package info 30 | id: packageOld 31 | uses: codex-team/action-nodejs-package-info@v1 32 | 33 | # Stop workflow and do not bump version if it was changed already 34 | - name: Stop workflow and do not bump version if it was changed already 35 | uses: actions/github-script@v3 36 | if: steps.packageOld.outputs.version != steps.packageNew.outputs.version 37 | with: 38 | script: | 39 | core.setFailed('Version was changed! ${{ steps.packageOld.outputs.version }} -> ${{ steps.packageNew.outputs.version }}') 40 | 41 | bump-version: 42 | needs: check-for-no-version-changing 43 | runs-on: ubuntu-latest 44 | steps: 45 | # Checkout to target branch 46 | - uses: actions/checkout@v2 47 | 48 | # Setup node environment 49 | - uses: actions/setup-node@v1 50 | with: 51 | node-version: 18 52 | 53 | # Bump version to the next prerelease (patch) with rc suffix 54 | - name: Suggest the new version 55 | run: yarn version --prerelease --preid rc --no-git-tag-version 56 | 57 | # Get package new version name 58 | - name: Get package info 59 | id: package 60 | uses: codex-team/action-nodejs-package-info@v1 61 | 62 | # Commit and push changes 63 | - uses: EndBug/add-and-commit@v7 64 | with: 65 | author_name: github-actions 66 | author_email: 41898282+github-actions[bot]@users.noreply.github.com 67 | message: "Bump version up to ${{ steps.package.outputs.version }}" -------------------------------------------------------------------------------- /.github/workflows/npm-publish.yml: -------------------------------------------------------------------------------- 1 | name: Publish package to NPM 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | - master 8 | 9 | jobs: 10 | publish: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: 18 17 | registry-url: https://registry.npmjs.org/ 18 | 19 | - run: yarn 20 | - run: yarn publish --access=public --tag=next 21 | env: 22 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 23 | 24 | - name: Get package info 25 | id: package 26 | uses: codex-team/action-nodejs-package-info@v1.1 27 | 28 | - name: Add LATEST tag for the published package if this is not a -rc version 29 | if: steps.package.outputs.is-release-candidate == 'false' 30 | run: npm dist-tag add ${{ steps.package.outputs.name }}@${{ steps.package.outputs.version }} latest 31 | env: 32 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 33 | 34 | notify: 35 | needs: publish 36 | runs-on: ubuntu-latest 37 | steps: 38 | - uses: actions/checkout@v2 39 | - name: Get package info 40 | id: package 41 | uses: codex-team/action-nodejs-package-info@v1 42 | - name: Send a message 43 | uses: codex-team/action-codexbot-notify@v1 44 | with: 45 | webhook: ${{ secrets.CODEX_BOT_NOTIFY_EDITORJS_PUBLIC_CHAT }} 46 | message: '📦 [${{ steps.package.outputs.name }}](${{ steps.package.outputs.npmjs-link }}) ${{ steps.package.outputs.version }} was published' 47 | parse_mode: 'markdown' 48 | disable_web_page_preview: true 49 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .vscode 3 | .DS_Store 4 | node_modules 5 | *.log 6 | 7 | template/yarn.lock 8 | 9 | package-lock.json -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 CodeX Team 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 🚧 Development in progress 🚧 2 | 3 | # Editor.js Tool — starter kit package 4 | 5 | Single command helper to generate a Tool template. 6 | 7 | ## Usage 8 | 9 | Use `create` command to generate Tool's starter kit. 10 | 11 | ``` 12 | npm create @editorjs/tool 13 | yarn create @editorjs/tool 14 | ``` 15 | 16 | ## Development 17 | 18 | New project files will be used from `template` folder. You can work in this folder as in generated project: upgrade dependencies, add new files, run build and dev commands. 19 | 20 | In templates there is a variable that will be replaced with user's input: 21 | 22 | - `VAR_TOOL_NAME` — tool name 23 | 24 | ### Local testing 25 | 26 | To test the package locally, you have to create a symlink to the global `node_modules` folder. Use the package to generate a new tool. And then you need to unlink local package. 27 | 28 | #### Linking 29 | 30 | Run the following command in the root of this package repository: 31 | 32 | ``` 33 | npm link 34 | yarn link 35 | ``` 36 | 37 | In the folder where you want to create a new tool, link the local package: 38 | 39 | ``` 40 | npm link @editorjs/create-tool 41 | yarn link @editorjs/create-tool 42 | ``` 43 | 44 | #### Usage 45 | 46 | Use this tool as usual: 47 | 48 | ``` 49 | npm create @editorjs/tool 50 | yarn create @editorjs/tool 51 | ``` 52 | 53 | #### Unlinking 54 | 55 | To unlink the local package run the following in tool's parent folder where I had to link it earlier: 56 | 57 | ``` 58 | npm unlink @editorjs/create-tool 59 | yarn unlink @editorjs/create-tool 60 | ``` 61 | 62 | And then unlink the package in the root of this package repository: 63 | 64 | ``` 65 | npm unlink @editorjs/create-tool 66 | yarn unlink @editorjs/create-tool 67 | ``` 68 | -------------------------------------------------------------------------------- /bin/create-tool.js: -------------------------------------------------------------------------------- 1 | #! /usr/bin/env node 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | const getAllFiles = require('get-all-files'); 6 | 7 | /** 8 | * Get Tool Name from CLI arguments 9 | */ 10 | const toolName = process.argv[2]; 11 | 12 | if (!toolName) { 13 | console.log('Please specify tool name'); 14 | process.exit(1); 15 | } 16 | 17 | /** 18 | * Copy template folder to new Tool folder 19 | */ 20 | console.log('Creating tool', toolName); 21 | 22 | const toolPath = path.join(process.cwd(), toolName); 23 | fs.mkdirSync(toolPath); 24 | 25 | const templatePath = path.join(__dirname, '..', 'template'); 26 | const files = getAllFiles.getAllFilesSync(templatePath).toArray(); 27 | files.forEach(file => { 28 | const relativePath = path.relative(templatePath, file); 29 | 30 | console.log(`Copying ${relativePath}`); 31 | 32 | /** 33 | * Get file content and replace VAR_TOOL_NAME with tool name 34 | */ 35 | const content = fs.readFileSync(file, 'utf-8'); 36 | const replacedContent = content.replace(/VAR_TOOL_NAME/g, toolName); 37 | 38 | /** 39 | * Create folders if needed 40 | */ 41 | const folder = path.dirname(path.join(toolPath, relativePath)); 42 | if (!fs.existsSync(folder)) { 43 | fs.mkdirSync(folder, { recursive: true }); 44 | } 45 | 46 | /** 47 | * Write file 48 | */ 49 | fs.writeFileSync(path.join(toolPath, relativePath), replacedContent); 50 | }); 51 | 52 | console.log(''); 53 | console.log('Done!'); 54 | console.log(''); 55 | 56 | /** 57 | * Show next steps message 58 | */ 59 | console.log('Now run:'); 60 | console.log(` cd ${toolName}`); 61 | console.log(' npm install'); 62 | console.log(' npm run build:dev'); 63 | 64 | console.log(''); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@editorjs/create-tool", 3 | "description": "Editor.js Tool single command generator", 4 | "version": "0.1.3", 5 | "license": "MIT", 6 | "bin": { 7 | "create-tool": "./bin/create-tool.js" 8 | }, 9 | "dependencies": { 10 | "get-all-files": "^4.1.0" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /template/.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .DS_Store 3 | node_modules 4 | *.log 5 | dist -------------------------------------------------------------------------------- /template/README.md: -------------------------------------------------------------------------------- 1 | # VAR_TOOL_NAME Tool for Editor.js 2 | 3 | ## Installation 4 | 5 | Use your package manager to install the package `editorjs-VAR_TOOL_NAME`. 6 | 7 | ``` 8 | npm install editorjs-VAR_TOOL_NAME 9 | 10 | yarn add editorjs-VAR_TOOL_NAME 11 | ``` 12 | 13 | ## Development 14 | 15 | This tool uses [Vite](https://vitejs.dev/) as builder. 16 | 17 | `npm run dev` — run development environment with hot reload 18 | 19 | `npm run build` — build the tool for production to the `dist` folder 20 | 21 | ## Links 22 | 23 | [Editor.js](https://editorjs.io) • [Create Tool](https://github.com/editor-js/create-tool) -------------------------------------------------------------------------------- /template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Editor.js example page 4 | 5 | 10 | 11 | 12 |
13 | 14 | 15 | 

16 | 
17 |   
50 | 
51 | 
52 | 
53 | 


--------------------------------------------------------------------------------
/template/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "editorjs-VAR_TOOL_NAME",
 3 |   "description": "VAR_TOOL_NAME Tool for Editor.js",
 4 |   "version": "1.0.0",
 5 |   "main": "dist/VAR_TOOL_NAME.umd.js",
 6 |   "module": "dist/VAR_TOOL_NAME.mjs",
 7 |   "scripts": {
 8 |     "dev": "vite",
 9 |     "build": "vite build"
10 |   },
11 |   "devDependencies": {
12 |     "@codexteam/icons": "^0.2.0",
13 |     "@editorjs/editorjs": "^2.26.4",
14 |     "@types/node": "^18.11.16",
15 |     "ts-loader": "^9.1.0",
16 |     "typescript": "^4.2.4",
17 |     "vite": "^4.0.1",
18 |     "vite-plugin-css-injected-by-js": "^2.1.1"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/template/src/Globals.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.module.css";


--------------------------------------------------------------------------------
/template/src/index.module.css:
--------------------------------------------------------------------------------
1 | .VAR_TOOL_NAME-tool {
2 |   margin: 1em auto;
3 |   height: 100px;
4 | 
5 |   background-color: #eee;
6 |   border-radius: 8px;
7 | }


--------------------------------------------------------------------------------
/template/src/index.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Import styles library
  3 |  */
  4 | import styles from './index.module.css';
  5 | 
  6 | /**
  7 |  * Import icons
  8 |  */
  9 | import { IconStar } from '@codexteam/icons';
 10 | 
 11 | /**
 12 |  * Import types
 13 |  */
 14 | import { VAR_TOOL_NAMEData, VAR_TOOL_NAMEConfig } from './types';
 15 | import { API, BlockAPI, BlockTool } from '@editorjs/editorjs';
 16 | 
 17 | /**
 18 |  * VAR_TOOL_NAME Tool for Editor.js
 19 |  */
 20 | export default class VAR_TOOL_NAME implements BlockTool {
 21 |   /**
 22 |    * Code API — public methods to work with Editor
 23 |    * 
 24 |    * @link https://editorjs.io/api
 25 |    */
 26 |    private readonly api: API;
 27 | 
 28 |   /**
 29 |    * Block API — methods and properties to work with Block instance
 30 |    * 
 31 |    * @link https://editorjs.io/blockapi
 32 |    */
 33 |   private readonly block: BlockAPI;
 34 | 
 35 |   /**
 36 |    * Read-only mode flag
 37 |    */
 38 |   private readonly readOnly: boolean;
 39 | 
 40 |   /**
 41 |    * Tool data for input and output
 42 |    */
 43 |   private data: VAR_TOOL_NAMEData;
 44 | 
 45 |   /**
 46 |    * Configuration object that passed through the initial Editor configuration.
 47 |    */
 48 |   private config: VAR_TOOL_NAMEConfig;
 49 | 
 50 |   /**
 51 |    * Tool's HTML nodes
 52 |    */
 53 |   private nodes: {[key: string]: HTMLElement|null};
 54 | 
 55 |   /**
 56 |    * Class constructor
 57 |    * 
 58 |    * @link https://editorjs.io/tools-api#class-constructor
 59 |    */
 60 |   constructor({ data, config, api, block, readOnly }: { data: VAR_TOOL_NAMEData, config: VAR_TOOL_NAMEConfig, api: API, block: BlockAPI, readOnly: boolean }) {
 61 |     this.data = data;
 62 |     this.config = config;
 63 |     this.api = api;
 64 |     this.block = block;
 65 |     this.readOnly = readOnly;
 66 | 
 67 |     /**
 68 |      * Declare Tool's nodes
 69 |      */
 70 |     this.nodes = {
 71 |       wrapper: null,
 72 |     };
 73 |   }
 74 | 
 75 |   /**
 76 |    * PUBLIC METHODS
 77 |    * 
 78 |    * @link https://editorjs.io/tools-api#public-methods
 79 |    */
 80 | 
 81 |   /**
 82 |    * Creates UI of a Block
 83 |    * Required
 84 |    * @link https://editorjs.io/tools-api#render
 85 |    * 
 86 |    * @returns {HTMLElement}
 87 |    */
 88 |   render() {
 89 |     this.nodes.wrapper = document.createElement('div');
 90 |     this.nodes.wrapper.classList.add(styles['VAR_TOOL_NAME-tool']);
 91 | 
 92 |     return this.nodes.wrapper;
 93 |   }
 94 | 
 95 |   /**
 96 |    * Extracts Block data from the UI
 97 |    * Required
 98 |    * @link https://editorjs.io/tools-api#save
 99 |    * 
100 |    * @returns {VAR_TOOL_NAMEData} saved data
101 |    */
102 |   save(): VAR_TOOL_NAMEData {
103 |     return {};
104 |   }
105 | 
106 |   /**
107 |    * Validates Block data after saving
108 |    * @link https://editorjs.io/tools-api#validate
109 |    * 
110 |    * @param {VAR_TOOL_NAMEData} savedData
111 |    * @returns {boolean} true if data is valid, otherwise false
112 |    */ 
113 |   // validate() {}
114 | 
115 |   /**
116 |    * 
117 |    * Returns HTML that will be appended at the top of Block-settings
118 |    * @link https://editorjs.io/tools-api#render-settings
119 |    * 
120 |    * @returns {HTMLElement}
121 |    */ 
122 |   // renderSettings() {}
123 | 
124 |   /**
125 |    * Clear Tools stuff: cache, variables, events.
126 |    * Called when Editor instance is destroying.
127 |    * @link https://editorjs.io/tools-api#destroy
128 |    * 
129 |    * @returns {void}
130 |    */
131 |   // destroy() {}
132 | 
133 |   /**
134 |    * Handle content pasted by ways that described by pasteConfig static getter
135 |    * @link https://editorjs.io/tools-api#on-paste
136 |    * 
137 |    * @param {PasteEvent} event - event with pasted content
138 |    * @returns {void}
139 |    */  
140 |   // onPaste() {}
141 | 
142 |   /**
143 |    * Specifies how to merge two similar Blocks
144 |    * @link https://editorjs.io/tools-api#merge
145 |    * 
146 |    * @param {VAR_TOOL_NAMEData} data - data of second Block
147 |    * @returns {VAR_TOOL_NAMEData} - merged data
148 |    */
149 |   // merge() {} 
150 | 
151 |   /**
152 |    * STATIC GETTERS
153 |    * 
154 |    * @link https://editorjs.io/tools-api#static-getters
155 |    */
156 | 
157 |   /**
158 |    * Process pasted content before appending to the Editor
159 |    * @link https://editorjs.io/tools-api#pasteconfig
160 |    * 
161 |    * @returns {tags?: string[], files?: { mimeTypes: string[], extensions: string[] }, patterns?: { [string]: RegEx }}
162 |    */ 
163 |   // static get pasteConfig() {
164 |   //   return {
165 |   //     /**
166 |   //      * Paste HTML into Editor
167 |   //      */
168 |   //     tags: [],
169 |     
170 |   //     /**
171 |   //      * Paste URL of media into the Editor
172 |   //      */
173 |   //     patterns: {},
174 |     
175 |   //     /**
176 |   //      * Drag n drop file from into the Editor
177 |   //      */
178 |   //     files: {
179 |   //       mimeTypes: [ ],
180 |   //     },
181 |   //   };
182 |   // }
183 | 
184 |   /**
185 |    * Clean unwanted HTML tags or attributes
186 |    * @link https://editorjs.io/tools-api#sanitize
187 |    * 
188 |    * @returns {{[string]: boolean|object}} - Sanitizer rules
189 |    */
190 |   // static get sanitize() {
191 |   //   return {};
192 |   // } 
193 | 
194 |   /**
195 |    * Describe an icon and title here
196 |    * Required if Tools should be added to the Toolbox
197 |    * @link https://editorjs.io/tools-api#toolbox
198 |    * 
199 |    * @returns {{icon: string, title: string}}
200 |    */
201 |   static get toolbox() {
202 |     return {
203 |       title: 'VAR_TOOL_NAME',
204 |       icon: IconStar,
205 |     };
206 |   }
207 | 
208 |   /**
209 |    * Shortcut that fires render method and inserts new Block
210 |    * @link https://editorjs.io/tools-api#shortcut
211 |    * 
212 |    * @returns {string}
213 |    */
214 |   // static get shortcut() {
215 |   //   // return 'CMD+SHIFT+I';
216 |   // }
217 | 
218 |   /**
219 |    * Config allows Tool to specify how it can be converted into/from another Tool
220 |    * 
221 |    * @link https://editorjs.io/tools-api#conversionconfig
222 |    * 
223 |    * @returns {{export: string|function, import: string|function}}
224 |    */
225 |   // static get conversionConfig() {
226 |   //   // return {
227 |   //   //   export: (data) => {
228 |   //   //     return data.items.join('.'); // in this example, all list items will be concatenated to an export string
229 |   //   //   },
230 |   //   //  
231 |   //   //   /**
232 |   //   //    * In this example, List Tool creates items by splitting original text by a dot symbol. 
233 |   //   //    */
234 |   //   //   import: (string) => {
235 |   //   //     const items = string.split('.');
236 |   //   //
237 |   //   //     return {
238 |   //   //       items: items.filter( (text) => text.trim() !== ''),
239 |   //   //       type: 'unordered'
240 |   //   //     };
241 |   //   //   }
242 |   //   // };
243 |   // }
244 | 
245 |   /**
246 |    * With this option, Editor.js won't handle Enter keydowns
247 |    * @link https://editorjs.io/tools-api#enablelinebreaks
248 |    * 
249 |    * @returns {boolean}
250 |    */ 
251 |   // static get enableLineBreaks() {
252 |   //   return true;
253 |   // }
254 | 
255 |   /**
256 |    * This flag tells core that current tool supports the read-only mode
257 |    * @link https://editorjs.io/tools-api#isreadonlysupported
258 |    * 
259 |    * @returns {boolean}
260 |    */
261 |   // static get isReadOnlySupported() {
262 |   //   return true;
263 |   // } 
264 | 
265 |   /**
266 |    * LIFE CYCLE HOOKS
267 |    * 
268 |    * These methods are called by Editor.js core
269 |    * @link https://editorjs.io/tools-api#lifecycle-hooks
270 |    */
271 | 
272 |   /**
273 |    * Called after Block contents is added to the page
274 |    */
275 |   // rendered() {}
276 | 
277 |   /**
278 |    * Called each time Block contents is updated
279 |    */
280 |   // updated() {}
281 | 
282 |   /**
283 |    * Called after Block contents is removed from the page but before Block instance deleted
284 |    */
285 |   // removed() {}
286 | 
287 |   /**
288 |    * Called after Block is moved by move tunes or through API
289 |    * 
290 |    * @param {MoveEvent} event 
291 |    */
292 |   // moved(event) {}
293 | };


--------------------------------------------------------------------------------
/template/src/types/index.ts:
--------------------------------------------------------------------------------
 1 | import { BlockToolData } from '@editorjs/editorjs';
 2 | 
 3 | /**
 4 |  * VAR_TOOL_NAME Tool's input and output data format
 5 |  */
 6 | export interface VAR_TOOL_NAMEData extends BlockToolData {}
 7 | 
 8 | /**
 9 |  * VAR_TOOL_NAME Tool's configuration object that passed through the initial Editor config
10 |  */
11 | export interface VAR_TOOL_NAMEConfig {}


--------------------------------------------------------------------------------
/template/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     /* Visit https://aka.ms/tsconfig.json to read more about this file */
 4 | 
 5 |     /* Basic Options */
 6 |     // "incremental": true,                         /* Enable incremental compilation */
 7 |     "target": "es5",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
 8 |     "module": "commonjs",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
 9 |     "lib": ["ES2020", "dom"],                       /* Specify library files to be included in the compilation. */
10 |     // "allowJs": true,                             /* Allow javascript files to be compiled. */
11 |     // "checkJs": true,                             /* Report errors in .js files. */
12 |     // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
13 |     // "declaration": true,                         /* Generates corresponding '.d.ts' file. */
14 |     // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
15 |     // "sourceMap": true,                           /* Generates corresponding '.map' file. */
16 |     // "outFile": "./",                             /* Concatenate and emit output to single file. */
17 |     // "outDir": "./",                              /* Redirect output structure to the directory. */
18 |     // "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
19 |     // "composite": true,                           /* Enable project compilation */
20 |     // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
21 |     // "removeComments": true,                      /* Do not emit comments to output. */
22 |     // "noEmit": true,                              /* Do not emit outputs. */
23 |     // "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
24 |     // "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
25 |     // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
26 | 
27 |     /* Strict Type-Checking Options */
28 |     "strict": true,                                 /* Enable all strict type-checking options. */
29 |     // "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
30 |     // "strictNullChecks": true,                    /* Enable strict null checks. */
31 |     // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
32 |     // "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
33 |     // "strictPropertyInitialization": true,        /* Enable strict checking of property initialization in classes. */
34 |     // "noImplicitThis": true,                      /* Raise error on 'this' expressions with an implied 'any' type. */
35 |     // "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */
36 | 
37 |     /* Additional Checks */
38 |     // "noUnusedLocals": true,                      /* Report errors on unused locals. */
39 |     // "noUnusedParameters": true,                  /* Report errors on unused parameters. */
40 |     // "noImplicitReturns": true,                   /* Report error when not all code paths in function return a value. */
41 |     // "noFallthroughCasesInSwitch": true,          /* Report errors for fallthrough cases in switch statement. */
42 |     // "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
43 |     // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
44 | 
45 |     /* Module Resolution Options */
46 |     // "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
47 |     // "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
48 |     // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
49 |     // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
50 |     // "typeRoots": [],                             /* List of folders to include type definitions from. */
51 |     // "types": [],                                 /* Type declaration files to be included in compilation. */
52 |     // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
53 |     "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
54 |     // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
55 |     // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */
56 | 
57 |     /* Source Map Options */
58 |     // "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
59 |     // "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
60 |     // "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
61 |     // "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
62 | 
63 |     /* Experimental Options */
64 |     // "experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */
65 |     // "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */
66 | 
67 |     /* Advanced Options */
68 |     "skipLibCheck": true,                           /* Skip type checking of declaration files. */
69 |     "forceConsistentCasingInFileNames": true,       /* Disallow inconsistently-cased references to the same file. */
70 |     
71 |     "plugins": [{
72 |       "name": "typescript-plugin-css-modules"
73 |     }]
74 |   }
75 | }


--------------------------------------------------------------------------------
/template/vite.config.js:
--------------------------------------------------------------------------------
 1 | import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
 2 | import path from 'path';
 3 | 
 4 | /**
 5 |  * Trick to use Vite server.open option on macOS
 6 |  * @see https://github.com/facebook/create-react-app/pull/1690#issuecomment-283518768
 7 |  */
 8 | process.env.BROWSER = 'open';
 9 | 
10 | export default {
11 |   build: {
12 |     lib: {
13 |       entry: path.resolve(__dirname, 'src', 'index.ts'),
14 |       name: 'VAR_TOOL_NAME',
15 |       formats: ['umd', 'es'],
16 |       fileName: 'VAR_TOOL_NAME'
17 |     },
18 |   },
19 | 
20 |   server: {
21 |     port: 3300,
22 |     open: true,
23 |   },
24 | 
25 |   plugins: [
26 |     cssInjectedByJsPlugin(),
27 |   ]
28 | }


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 | 
4 | 
5 | "get-all-files@^4.1.0":
6 |   "integrity" "sha512-ZH0Sbr6VQLMCcjrWNWyK0Wii9Kfw7ALnaZL6/5tTYf2/9lMtTTx9jSVAU92D3HfH9K8veAIehq3PbCZA7yde2g=="
7 |   "resolved" "https://registry.npmjs.org/get-all-files/-/get-all-files-4.1.0.tgz"
8 |   "version" "4.1.0"
9 | 


--------------------------------------------------------------------------------