feat/vite: Replace Parcel with Vite

.github/workflows/nodejs.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x]
+        node-version: [12.x, 14.x]
 
     steps:
     - uses: actions/checkout@v2

README.md

@@ -22,7 +22,7 @@ $ npm install -g @flayyer/cli
 $ flayyer COMMAND
 running command...
 $ flayyer (-v|--version|version)
-@flayyer/cli/1.12.1 darwin-x64 node-v14.15.3
+@flayyer/cli/2.0.0-beta.0 darwin-x64 node-v14.15.3
 $ flayyer --help [COMMAND]
 USAGE
   $ flayyer COMMAND
@@ -59,7 +59,7 @@ EXAMPLES
   $ flayyer build --help
 ```
 
-_See code: [src/commands/build.ts](https://github.com/flayyer/flayyer-cli/blob/v1.12.1/src/commands/build.ts)_
+_See code: [src/commands/build.ts](https://github.com/flayyer/flayyer-cli/blob/v2.0.0-beta.0/src/commands/build.ts)_
 
 ## `flayyer deploy [DIRECTORY]`
 
@@ -87,7 +87,7 @@ EXAMPLES
   $ flayyer deploy --help
 ```
 
-_See code: [src/commands/deploy.ts](https://github.com/flayyer/flayyer-cli/blob/v1.12.1/src/commands/deploy.ts)_
+_See code: [src/commands/deploy.ts](https://github.com/flayyer/flayyer-cli/blob/v2.0.0-beta.0/src/commands/deploy.ts)_
 
 ## `flayyer help [COMMAND]`
 
@@ -108,7 +108,7 @@ _See code: [@oclif/plugin-help](https://github.com/oclif/plugin-help/blob/v3.2.2
 
 ## `flayyer start`
 
-This command starts a development server using Parcel.js by default at http://localhost:7777
+This command starts a development server using Vite by default at http://localhost:7777
 
 ```
 USAGE
@@ -130,5 +130,5 @@ EXAMPLES
   $ flayyer start --help
 ```
 
-_See code: [src/commands/start.ts](https://github.com/flayyer/flayyer-cli/blob/v1.12.1/src/commands/start.ts)_
+_See code: [src/commands/start.ts](https://github.com/flayyer/flayyer-cli/blob/v2.0.0-beta.0/src/commands/start.ts)_
 <!-- commandsstop -->

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@flayyer/cli",
   "description": "Flayyer CLI",
-  "version": "1.12.1",
+  "version": "2.0.0-beta.0",
   "author": "Patricio López Juri @lopezjurip",
   "repository": "flayyer/flayyer-cli",
   "license": "MIT",
@@ -56,34 +56,36 @@
     "@oclif/command": "^1.8.0",
     "@oclif/config": "^1.17.0",
     "@oclif/plugin-help": "^3.2.2",
+    "@vitejs/plugin-react-refresh": "^1.3.1",
+    "@vitejs/plugin-vue": "^1.2.0",
+    "@vue/compiler-sfc": "^3.0.9",
     "archiver": "^5.3.0",
     "chalk": "^4.1.0",
     "chokidar": "^3.5.1",
-    "cross-fetch": "^3.1.0",
+    "cross-fetch": "^3.1.2",
     "debug": "^4.3.1",
     "dedent": "^0.7.0",
     "del": "^6.0.0",
     "form-data": "^4.0.0",
     "graphql": "^15.5.0",
     "graphql-request": "3.4.0",
-    "parcel-bundler": "^1.12.4",
-    "qs": "^6.9.6",
+    "qs": "^6.10.1",
     "tslib": "^2.1.0",
-    "twemoji": "^13.0.2"
+    "twemoji": "^13.0.2",
+    "vite": "^2.1.3"
   },
   "devDependencies": {
-    "@flayyer/eslint-config": "^1.0.4",
+    "@flayyer/eslint-config": "^1.0.6",
     "@oclif/dev-cli": "^1.26.0",
     "@types/archiver": "^5.1.0",
     "@types/debug": "^4.1.5",
     "@types/dedent": "^0.7.0",
-    "@types/node": "^14.14.35",
+    "@types/node": "^14.14.37",
     "@types/node-fetch": "^2.5.8",
-    "@types/parcel-bundler": "^1.12.3",
-    "eslint": "^7.22.0",
+    "@types/qs": "^6.9.6",
+    "eslint": "^7.23.0",
     "eslint-config-oclif": "^3.1",
     "eslint-config-oclif-typescript": "^0.2.0",
-    "globby": "^11.0.2",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
     "prettier": "^2.2.1",

src/commands/build.ts

@@ -4,10 +4,12 @@ import path from "path";
 
 import { Command, flags } from "@oclif/command";
 import type { args } from "@oclif/parser";
+import reactRefresh from "@vitejs/plugin-react-refresh";
+import vue from "@vitejs/plugin-vue";
 import chalk from "chalk";
 import dedent from "dedent";
 import del from "del";
-import Bundler, { ParcelOptions } from "parcel-bundler";
+import * as Vite from "vite";
 
 import { prepareProject } from "../prepare";
 import { namespaced } from "../utils/debug";
@@ -109,27 +111,29 @@ export default class Build extends Command {
       this.error(error); // exits
     }
 
-    this.log(`🏗   Will build with Parcel 📦 bundler`);
-    const glob = path.join(to, "*.html");
-    const bundlerOptions: ParcelOptions = {
-      outDir: out,
-      publicUrl: "./",
-      watch: false,
-      cache: true,
-      cacheDir: cache,
-      contentHash: true,
-      minify: true,
-      target: "browser",
-      // logLevel: 0 as any,
-      hmr: false,
-      sourceMaps: false,
-      detailedReport: false,
-      // autoInstall: true,
+    this.log(`🏗   Will build with Vite ⚡️ bundler`);
+    const bundlerOptions: Vite.InlineConfig = {
+      configFile: false,
+      root: to,
+      base: "/",
+      clearScreen: false,
+      build: {
+        assetsDir: ".", // plain output directory
+        outDir: out,
+        rollupOptions: {
+          input: entries.map((e) => e.html.path),
+        },
+      },
+      // esbuild: {
+      //   // https://github.com/vitejs/vite/issues/769
+      //   include: /\.(tsx?|jsx?)$/,
+      //   exclude: [],
+      //   loader: "tsx",
+      // },
+      plugins: [reactRefresh(), vue()],
     };
-    debug("glob pattern for Parcel is: %s", glob);
-    debug("options for Parcel are: %O", bundlerOptions);
-    const bundler = new Bundler(glob, bundlerOptions);
-    await bundler.bundle();
+    debug("options for Vite are: %O", bundlerOptions);
+    await Vite.build(bundlerOptions);
     debug("success at building");
 
     const templates = entries.map((entry) => ({ slug: entry.name }));

src/commands/start.ts

@@ -2,12 +2,14 @@ import fs from "fs";
 import path from "path";
 
 import { Command, flags } from "@oclif/command";
+import reactRefresh from "@vitejs/plugin-react-refresh";
+import vue from "@vitejs/plugin-vue";
 import chalk from "chalk";
 import chokidar, { WatchOptions } from "chokidar";
 import dedent from "dedent";
 import del from "del";
-import Bundler, { ParcelOptions } from "parcel-bundler";
 import qs from "qs";
+import * as Vite from "vite";
 
 import { prepareProject } from "../prepare";
 import { namespaced } from "../utils/debug";
@@ -17,7 +19,7 @@ const debug = namespaced("start");
 
 export default class Start extends Command {
   static description = dedent`
-    This command starts a development server using Parcel.js by default at http://localhost:7777
+    This command starts a development server using Vite by default at http://localhost:7777
     See online documentation here: https://docs.flayyer.com/docs/cli/flayyer-cli#flayyer-start
   `;
 
@@ -95,26 +97,35 @@ export default class Start extends Command {
       await prepareProject({ engine: config.engine, from, to, style });
     });
 
-    this.log(`🏗   Will build with Parcel 📦 bundler`);
-    const glob = path.join(to, "*.html");
-    const bundlerOptions: ParcelOptions = {
-      outDir: out,
-      publicUrl: "/",
-      watch: true,
-      cache: true,
-      cacheDir: cache,
-      // contentHash: true,
-      minify: false,
-      target: "browser",
-      // logLevel: 0 as any,
-      hmr: true,
-      sourceMaps: true,
-      detailedReport: false,
-      // autoInstall: true,
+    this.log(`🏗   Will build with Vite ⚡️ bundler`);
+    const bundlerOptions: Vite.InlineConfig = {
+      configFile: false,
+      root: to,
+      base: "/",
+      clearScreen: false,
+      build: {
+        assetsDir: ".", // plain output directory
+        outDir: out,
+        rollupOptions: {
+          input: entries.map((e) => e.html.path),
+        },
+      },
+      // esbuild: {
+      //   // https://github.com/vitejs/vite/issues/769
+      //   include: /\.(tsx?|jsx?)$/,
+      //   exclude: [],
+      //   loader: "tsx",
+      // },
+      plugins: [reactRefresh(), vue()],
+      server: {
+        host: flags.host,
+        port: flags.port,
+        https: flags.https,
+        strictPort: true,
+      },
     };
-    debug("glob pattern for Parcel is: %s", glob);
-    debug("options for Parcel are: %O", bundlerOptions);
-    const bundler = new Bundler(glob, bundlerOptions);
+    debug("options for Vite are: %O", bundlerOptions);
+    const server = await Vite.createServer(bundlerOptions);
 
     const STUDIO_URL = "https://flayyer.github.io/flayyer-studio/";
     function studio({ template }: { template: string }) {
@@ -130,9 +141,9 @@ export default class Start extends Command {
     }
 
     const url = `${flags.https ? "https" : "http"}://${flags.host}:${flags.port}`;
-    debug("will start Parcel server as: %s", url);
-    const server = await bundler.serve(flags.port, flags.https, flags.host);
-    if (!server.listening) {
+    debug("will start Vite server as: %s", url);
+    await server.listen();
+    if (!server.httpServer?.listening) {
       this.error(`Could not start server at ${url}`);
     }
     this.log("");

src/prepare.ts

@@ -21,6 +21,7 @@ const GLOBAL_STYLE = dedent`
   body, html {
     padding: 0;
     margin: 0;
+    overflow: hidden;
   }
   img.emoji {
     display: inline;
@@ -45,13 +46,13 @@ export async function prepareProject({ engine, from, to, style }: PrepareProject
         Directories inside '/templates' are not supported. Please move directory '${name}' outside of '/templates' to a new sibling directory like '/components' or '/utils'.
       `);
     } else if (stats.isFile()) {
-      // Write template body to new file
-      const contents = fs.readFileSync(namePath, "utf8");
+      const ext = path.extname(name);
+      const nameNoExt = path.basename(name, ext);
       const writePath = path.join(to, name);
+      const contents = fs.readFileSync(namePath, "utf8");
+      // Write template body to new file
       fs.writeFileSync(writePath, contents, "utf8");
 
-      const ext = path.extname(name);
-      const nameNoExt = path.basename(name, ext);
       if (["react", "react-typescript"].includes(engine)) {
         if ([".js", ".jsx", ".ts", ".tsx"].includes(ext)) {
           const flayyerHTMLName = path.basename(writePath, ext) + ".html";
@@ -103,6 +104,7 @@ export async function prepareProject({ engine, from, to, style }: PrepareProject
             <html>
               <head>
                 <meta charset="utf-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                 <title>${name}</title>
                 <style>
                   ${GLOBAL_STYLE}
@@ -111,7 +113,7 @@ export async function prepareProject({ engine, from, to, style }: PrepareProject
               <body>
                 <div id="root"></div>
 
-                <script src="./${flayyerJSName}"></script>
+                <script type="module" src="./${flayyerJSName}"></script>
               </body>
             </html>
           `;
@@ -130,14 +132,14 @@ export async function prepareProject({ engine, from, to, style }: PrepareProject
           const flayyerJSName = "flayyer-" + path.basename(writePath, ext) + ".js";
           const flayyerJSPath = path.join(path.dirname(writePath), flayyerJSName);
           const flayyerJS = dedent`
-            import Vue from "vue";
+            import { h, createApp, onMounted, nextTick } from "vue";
             import qs from "qs";
             import twemoji from "twemoji";
 
             import Template from "./${name}";
 
-            new Vue({
-              render: createElement => {
+            createApp({
+              render() {
                 const {
                   _id: id,
                   _tags: tags,
@@ -149,14 +151,18 @@ export async function prepareProject({ engine, from, to, style }: PrepareProject
                 const agent = { name: ua };
                 const props = { id, tags, variables, agent, width: Number(_w), height: Number(_h) };
                 const style = ${JSON.stringify(style)};
-                return createElement(Template, { props, style });
+                return h("main", { style }, h(Template, props));
               },
-              mounted() {
-                this.$nextTick(function () {
+              setup() {
+                onMounted(() => {
                   twemoji.parse(window.document.body, { folder: "svg", ext: ".svg" });
-                })
+                  nextTick().then(() => {
+                    // TODO: Not sure when to run twemoji
+                    // twemoji.parse(window.document.body, { folder: "svg", ext: ".svg" });
+                  });
+                });
               },
-            }).$mount("#root");
+            }).mount("#root");
           `;
           fs.writeFileSync(flayyerJSPath, flayyerJS, "utf8");
 
@@ -166,6 +172,7 @@ export async function prepareProject({ engine, from, to, style }: PrepareProject
             <html>
               <head>
                 <meta charset="utf-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                 <title>${name}</title>
                 <style>
                   ${GLOBAL_STYLE}
@@ -174,7 +181,7 @@ export async function prepareProject({ engine, from, to, style }: PrepareProject
               <body>
                 <div id="root"></div>
 
-                <script src="./${flayyerJSName}"></script>
+                <script type="module" src="./${flayyerJSName}"></script>
               </body>
             </html>
           `;

tsconfig.json

@@ -6,6 +6,7 @@
     "module": "commonjs",
     "outDir": "lib",
     "rootDir": "src",
+    "skipLibCheck": true,
     "alwaysStrict": true,
     "strict": true,
     "strictNullChecks": true,