update builder

vaimalaviya1233 · Nov 29, 2022 · d05359e · d05359e
1 parent c46bee7
commit d05359e
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -14,9 +14,9 @@ npm create @editorjs/tool <tool-name>
 
 ## Development
 
-New project files will be used from `template` folder.
+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.
 
-Also we have variables in templates that will be replaced with user's input:
+In templates there is a variable that will be replaced with user's input:
 
 - `VAR_TOOL_NAME` — tool name
 

diff --git a/template/.npmignore b/template/.npmignore
@@ -0,0 +1,7 @@
+.github/
+.idea/
+src/
+index.html
+tsconfig.json
+vite.config.js
+yarn.lock
diff --git a/template/README.md b/template/README.md
@@ -10,6 +10,14 @@ npm install editorjs-VAR_TOOL_NAME
 yarn add editorjs-VAR_TOOL_NAME
 ```
 
+## Development
+
+This tool uses [Vite](https://vitejs.dev/) as builder.
+
+`npm run dev` — run development environment on [http://127.0.0.1:3300](http://127.0.0.1:3300/) with hot reload
+
+`npm run build` — build the tool for production to the `dist` folder
+
 ## Links
 
 [Editor.js](https://editorjs.io) • [Create Tool](https://github.com/editor-js/create-tool)
diff --git a/template/example/index.html → template/index.html b/template/example/index.html → template/index.html
@@ -2,9 +2,7 @@
 <head>
   <title>Editor.js example page</title>
 
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
-
-  <script src="../dist/VAR_TOOL_NAME.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@editorjs/[email protected]"></script>
 
   <style>
     body {
@@ -18,7 +16,9 @@
   <button id="save-button">Save</button>
   <pre id="output"></pre>
 
-  <script>
+  <script type="module">
+    import VAR_TOOL_NAME from './src/index.ts';
+
     const editor = new EditorJS({
       tools: {
         VAR_TOOL_NAME: {

diff --git a/template/package.json b/template/package.json
@@ -4,6 +4,7 @@
   "version": "1.0.0",
   "main": "dist/bundle.js",
   "scripts": {
+    "dev": "vite",
     "build": "vite build"
   },
   "devDependencies": {
@@ -12,7 +13,6 @@
     "@types/node": "^16.3.3",
     "ts-loader": "^9.1.0",
     "typescript": "^4.2.4",
-    "typescript-plugin-css-modules": "^3.4.0",
     "vite": "^3.1.0"
   }
 }
diff --git a/template/vite.config.js b/template/vite.config.js
@@ -1,21 +1,28 @@
 import path from 'path';
 
-export default {
-  build: {
-    rollupOptions: {
-      input: {
-        VAR_TOOL_NAME: path.resolve(__dirname, 'src/index.ts'),
-      },
+export default ({ command }) => {
+  if (command === 'build') return {
+    build: {
+      rollupOptions: {
+        input: {
+          VAR_TOOL_NAME: path.resolve(__dirname, 'src/index.ts'),
+        },
 
-      output: {
-        name: 'VAR_TOOL_NAME',
-        format: 'umd',
+        output: {
+          name: 'VAR_TOOL_NAME',
+          format: 'umd',
+          dir: 'dist',
+          entryFileNames: '[name].js',
+        },
 
-        dir: 'dist',
-        entryFileNames: '[name].js',
+        preserveEntrySignatures: 'strict',
       },
-
-      preserveEntrySignatures: 'strict',
     },
-  },
-};
+  };
+
+  return {
+    server: {
+      port: '3300'
+    }
+  };
+}