@imtf/profile-scripts 1.0.3 → 1.0.7

package/bin/profile-scripts.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
 
-const spawn = require('cross-spawn')
 const concurrently = require('concurrently')
+const spawn = require('cross-spawn')
 
 const args = process.argv.slice(2)
-const scriptIndex = args.findIndex((x) => x === 'build' || x === 'start')
+const scriptIndex = args.findIndex(x => x === 'build' || x === 'start')
 const script = scriptIndex === -1 ? args[0] : args[scriptIndex]
 
 const scriptPath = require.resolve(`../scripts/esbuild.mjs`)

package/changelog.md

@@ -0,0 +1,48 @@
+# Versions
+
+Here you can find a resume of all changes between versions.
+
+## 1.0.7
+
+### Features
+
+- Use svgo to dedupe svgs ids and other optimizations
+
+## 1.0.6
+
+### Features
+
+- Load css (.css) as text (they are no longer built in a separate .css files)
+
+## 1.0.5
+
+### Bug fixes
+
+- Npm package issues fixed.
+
+## 1.0.4
+
+### 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)
+
+## 1.0.3
+
+### Features
+
+- Load fonts (.ttf, .eot) and images (.gif, .svg) within js file as data-urls
+
+## 1.0.2
+
+### Features
+
+- Load fonts (.woff, .woff2) and images (.jpg, .png) within js file as data-urls
+
+## 1.0.1
+
+### Bug fixes
+
+- Moved some dependencies from devDepenencies to dependencies.

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@imtf/profile-scripts",
-  "version": "1.0.3",
+  "version": "1.0.7",
   "description": "Default scripts to bundle & transpile imtf front-end plugins",
   "main": "index.js",
   "bin": {
     "profile-scripts": "./bin/profile-scripts.js"
   },
   "files": [
-    "scripts/esbuild.mjs",
-    ".prettierrc.js",
-    "yarn.lock"
+    "bin/",
+    "scripts/",
+    "changelog.md"
   ],
   "scripts": {
     "build": "NODE_ENV=production node scripts/esbuild.mjs",
@@ -25,14 +25,16 @@
   "license": "UNLICENSED",
   "private": false,
   "dependencies": {
-    "concurrently": "^6.2.1",
+    "@svgr/core": "^6.2.0",
+    "@svgr/plugin-jsx": "^6.2.0",
+    "@svgr/plugin-svgo": "^6.2.0",
+    "concurrently": "^7.0.0",
     "esbuild": "^0.14.8",
     "esbuild-plugin-external-global": "^1.0.1",
-    "esbuild-plugin-svgr": "^1.0.0",
     "serve": "^13.0.2"
   },
   "devDependencies": {
-    "@imtf/prettier-config": "^1.0.0",
-    "@imtf/eslint-config-react": "^1.0.0"
+    "@imtf/eslint-config-react": "^1.0.0",
+    "@imtf/prettier-config": "^1.0.0"
   }
 }

package/scripts/esbuild.mjs

@@ -1,13 +1,15 @@
 import { build } from 'esbuild'
 import externalGlobalPlugin from 'esbuild-plugin-external-global'
-import svgrPlugin from 'esbuild-plugin-svgr'
 import minimist from 'minimist'
 
+import svgPlugin from './svgPlugin.mjs'
+
 const { watch } = minimist(process.argv.slice(2))
 
 build({
   entryPoints: ['src/index.js'],
-  outfile: 'build/index.js',
+  // outfile: 'build/index.js',
+  outdir: 'build',
   platform: 'browser',
   bundle: true,
   target: 'es6',
@@ -25,9 +27,9 @@ build({
   minify:
     process.env.NODE_ENV === 'production' &&
     process.env.IMTF_MINIFY_WEBAPP !== 'false',
-  //   jsx: 'transform',
   loader: {
     // Enable JSX in .js files too
+    '.css': 'text',
     '.js': 'jsx',
     // Embed fonts
     '.eot': 'dataurl',
@@ -40,7 +42,7 @@ build({
     '.png': 'dataurl',
   },
   plugins: [
-    svgrPlugin(),
+    svgPlugin(),
     externalGlobalPlugin.externalGlobalPlugin({
       react: 'window.React',
       'react-dom': 'window.ReactDOM',

package/scripts/svgPlugin.mjs

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