@imtf/profile-scripts 1.0.8 → 1.1.1

package/bin/profile-scripts.js

@@ -1,58 +1,52 @@
 #!/usr/bin/env node
 
-const concurrently = require('concurrently')
-const spawn = require('cross-spawn')
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const spawn = require("cross-spawn");
 
-const args = process.argv.slice(2)
-const scriptIndex = args.findIndex(x => x === 'build' || x === 'start')
-const script = scriptIndex === -1 ? args[0] : args[scriptIndex]
+const args = process.argv.slice(2);
+const scriptIndex = args.findIndex((x) => x === "build" || x === "start");
+const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
 
-const scriptPath = require.resolve(`../scripts/esbuild.mjs`)
+const scriptPath = require.resolve(`../scripts/esbuild.mjs`);
 
 switch (script) {
-  case 'start': {
-    concurrently([
-      {
-        command: `node ${scriptPath} --watch`,
-        name: 'watch',
-        cwd: undefined,
-      },
-      { command: 'serve build -l 3010', name: 'serve' },
-    ])
-
-    break
-  }
-  case 'build': {
-    const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : []
-    const scriptArgs = args.slice(scriptIndex + 1)
-    const processArgs = nodeArgs.concat(scriptPath).concat(scriptArgs)
+  case "start":
+  case "build": {
+    const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
+    const scriptArgs = args.slice(scriptIndex + 1);
+
+    if (script === "start") {
+      scriptArgs.push("--watch");
+    }
+
+    const processArgs = nodeArgs.concat(scriptPath).concat(scriptArgs);
 
-    const child = spawn.sync('node', processArgs, {
-      stdio: 'inherit',
-      env: { ...process.env, NODE_ENV: 'production' },
-    })
+    const child = spawn.sync("node", processArgs, {
+      stdio: "inherit",
+      env: { ...process.env, NODE_ENV: "production" },
+    });
 
     if (child.signal) {
-      if (child.signal === 'SIGKILL') {
+      if (child.signal === "SIGKILL") {
         console.log(`
                     The build failed because the process exited too early.
                     This probably means the system ran out of memory or someone called
                     \`kill -9\` on the process.
-                `)
-      } else if (child.signal === 'SIGTERM') {
+                `);
+      } else if (child.signal === "SIGTERM") {
         console.log(`
                     The build failed because the process exited too early.
                     Someone might have called  \`kill\` or \`killall\`, or the system could
                     be shutting down.
-                `)
+                `);
       }
 
-      process.exit(1)
+      process.exit(1);
     }
 
-    break
+    break;
   }
   default:
-    console.log(`Unknown script "${script}".`)
-    break
+    console.log(`Unknown script "${script}".`);
+    break;
 }

package/changelog.md

@@ -2,6 +2,20 @@
 
 Here you can find a resume of all changes between versions.
 
+## 1.1.1
+
+### Chores
+
+- Upgraded dependencies
+
+## 1.1.0
+
+### Features
+
+- Upgraded dependencies
+- Use new ESBuild 0.17 APIs for dev watch & rebuild
+- Properly build TS files
+
 ## 1.0.7
 
 ### Features
@@ -25,9 +39,9 @@ Here you can find a resume of all changes between versions.
 ### Features
 
 - Use differents loaders for svgs :
-    * Svgs part of /src except ones that are in /src/assets will be
-      loaded as React components with svgr.
-    * Others will be loaded as dataurl (base64)
+  - Svgs part of /src except ones that are in /src/assets will be
+    loaded as React components with svgr.
+  - Others will be loaded as dataurl (base64)
 
 ## 1.0.3
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imtf/profile-scripts",
-  "version": "1.0.8",
+  "version": "1.1.1",
   "description": "Default scripts to bundle & transpile imtf front-end plugins",
   "main": "index.js",
   "bin": {
@@ -12,29 +12,29 @@
     "changelog.md"
   ],
   "scripts": {
-    "build": "NODE_ENV=production node scripts/esbuild.mjs",
-    "watch": "node scripts/esbuild.mjs --watch",
-    "serve": "serve build -l 3010",
-    "start": "concurrently yarn:watch yarn:serve"
+    "build": "NODE_ENV=production node scripts/esbuild.mjs --entryPoint=index.tsx",
+    "start": "node scripts/esbuild.mjs --entryPoint=index.tsx --watch"
   },
   "eslintConfig": {
-    "extends": "@imtf/eslint-config-react"
+    "extends": "@imtf/eslint-config-react",
+    "rules": {
+      "import/default": "off"
+    }
   },
   "prettier": "@imtf/prettier-config",
-  "author": "Luca Pillonel",
   "license": "UNLICENSED",
   "private": false,
   "dependencies": {
-    "@svgr/core": "^6.2.0",
-    "@svgr/plugin-jsx": "^6.2.0",
-    "@svgr/plugin-svgo": "^6.2.0",
-    "concurrently": "^7.0.0",
-    "esbuild": "^0.16.17",
+    "@svgr/core": "^8.0.0",
+    "@svgr/plugin-jsx": "^8.0.1",
+    "@svgr/plugin-svgo": "^8.0.1",
+    "concurrently": "^8.0.1",
+    "esbuild": "^0.18.6",
     "esbuild-plugin-external-global": "^1.0.1",
     "serve": "^14.1.2"
   },
   "devDependencies": {
-    "@imtf/eslint-config-react": "^1.0.0",
-    "@imtf/prettier-config": "^1.0.0"
+    "@imtf/eslint-config-react": "^3.0.0",
+    "@imtf/prettier-config": "^3.0.0"
   }
 }

package/scripts/esbuild.mjs

@@ -1,53 +1,72 @@
-import { build } from 'esbuild'
-import externalGlobalPlugin from 'esbuild-plugin-external-global'
-import minimist from 'minimist'
+import { build, context } from "esbuild";
+import esbuild from "esbuild-plugin-external-global";
+import minimist from "minimist";
 
-import svgPlugin from './svgPlugin.mjs'
+// eslint-disable-next-line import/no-named-as-default-member
+const externalGlobalPlugin = esbuild.externalGlobalPlugin;
 
-const { watch } = minimist(process.argv.slice(2))
+import notifierPlugin from "./notifierPlugin.mjs";
+import svgPlugin from "./svgPlugin.mjs";
 
-build({
-  entryPoints: ['src/index.js'],
-  // outfile: 'build/index.js',
-  outdir: 'build',
-  platform: 'browser',
+const { watch, entryPoint } = minimist(process.argv.slice(2));
+
+const entryPoints = entryPoint
+  ? typeof entryPoint === "string"
+    ? [entryPoint]
+    : entryPoint
+  : ["src/index.js"];
+
+/**
+ * @type {import('esbuild').BuildOptions}
+ */
+const config = {
+  entryPoints,
+  outdir: "build",
+  platform: "browser",
   bundle: true,
-  target: 'es6',
-
-  watch: watch
-    ? {
-        onRebuild(error, result) {
-          if (!error) {
-            console.log(`Rebuilt: ${new Date().getTime()}`)
-          }
-        },
-      }
-    : false,
+  target: "es2020",
 
   minify:
-    process.env.NODE_ENV === 'production' &&
-    process.env.IMTF_MINIFY_WEBAPP !== 'false',
+    process.env.NODE_ENV === "production" &&
+    process.env.IMTF_MINIFY_WEBAPP !== "false",
+
   loader: {
+    ".css": "text",
     // Enable JSX in .js files too
-    '.css': 'text',
-    '.js': 'jsx',
+    ".js": "jsx",
     // Embed fonts
-    '.eot': 'dataurl',
-    '.ttf': 'dataurl',
-    '.woff': 'dataurl',
-    '.woff2': 'dataurl',
+    ".eot": "dataurl",
+    ".ttf": "dataurl",
+    ".woff": "dataurl",
+    ".woff2": "dataurl",
     // Embed images
-    '.gif': 'dataurl',
-    '.jpg': 'dataurl',
-    '.png': 'dataurl',
+    ".gif": "dataurl",
+    ".jpg": "dataurl",
+    ".png": "dataurl",
   },
+
   plugins: [
     svgPlugin(),
-    externalGlobalPlugin.externalGlobalPlugin({
-      react: 'window.React',
-      'react-dom': 'window.ReactDOM',
-      'react-router-dom': 'window.reactRouterDom',
-      IMTFPlugins: 'window.IMTFPlugins',
+    externalGlobalPlugin({
+      react: "window.React",
+      "react-dom": "window.ReactDOM",
+      "react-router-dom": "window.reactRouterDom",
+      IMTFPlugins: "window.IMTFPlugins",
     }),
+    notifierPlugin(),
   ],
-})
+};
+
+if (watch) {
+  const ctx = await context(config);
+
+  // Enable watch mode
+  await ctx.watch();
+
+  // Enable serve mode
+  await ctx.serve({
+    port: 3010,
+  });
+} else {
+  build(config);
+}

package/scripts/notifierPlugin.mjs

@@ -0,0 +1,20 @@
+const notifierPlugin = () => ({
+  name: "svgr",
+  setup(build) {
+    let count = 0;
+
+    build.onEnd((result) => {
+      if (result.errors.length > 0) {
+        return;
+      }
+
+      if (count++ === 0) {
+        console.log(`1st build: ${new Date().getTime()}`);
+      } else {
+        console.log(`Rebuilt: ${new Date().getTime()}`);
+      }
+    });
+  },
+});
+
+export default notifierPlugin;

package/scripts/svgPlugin.mjs

@@ -1,44 +1,44 @@
-import { transform } from '@svgr/core'
-import fs from 'fs'
-import path from 'path'
+import { transform } from "@svgr/core";
+import fs from "fs";
+import path from "path";
 
 const svgPlugin = (options = {}) => ({
-  name: 'svgr',
+  name: "svgr",
   setup(build) {
-    build.onLoad({ filter: /\.svg$/ }, async args => {
+    build.onLoad({ filter: /\.svg$/ }, async (args) => {
       // Read file content
-      const svg = await fs.promises.readFile(args.path, 'utf8')
+      const svg = await fs.promises.readFile(args.path, "utf8");
 
       // Determine relative path
-      const relativePath = path.relative(process.cwd(), args.path)
+      const relativePath = path.relative(process.cwd(), args.path);
 
       // This is an asset ==> dataurl
       if (
-        !relativePath.startsWith('src/') ||
-        relativePath.startsWith('src/assets/')
+        !relativePath.startsWith("src/") ||
+        relativePath.startsWith("src/assets/")
       ) {
         return {
           contents: svg,
-          loader: 'dataurl',
-        }
+          loader: "dataurl",
+        };
       }
 
       // Otherwise it's a react component
       const contents = await transform(
         svg,
         {
-          plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
+          plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],
           ...options,
         },
         { filePath: args.path }
-      )
+      );
 
       return {
         contents,
-        loader: 'jsx',
-      }
-    })
+        loader: "jsx",
+      };
+    });
   },
-})
+});
 
-export default svgPlugin
+export default svgPlugin;