@storepress/create-plugin-html 0.0.4 → 0.0.6

package/README.md

@@ -7,17 +7,16 @@ This is a template for [`@wordpress/create-block`](https://developer.wordpress.o
 This template can be used by running the following command:
 
 ```bash
-npx @wordpress/create-block@latest --template @storepress/create-plugin-html my-extension-name
+npx -y @wordpress/create-block@latest --template @storepress/create-plugin-html --no-wp-scripts my-html-extension-name && cd "$_"
 ```
 
 Navigate to the newly created folder and get started.
 
 ```
-cd my-extension-name
-npm i prettier@npm:wp-prettier@latest --save-dev
-npm i                    # Install dependencies
-npm run build            # Build the javascript
-npx @wp-now/wp-now start # Start Wordpress environment
+npm i                        # Install dependencies
+npm run packages-update      # Update package dependency
+npm run build                # Build the javascript
+npx -y http-server           # Start Server
 ```
 
 ## Development
@@ -25,7 +24,7 @@ npx @wp-now/wp-now start # Start Wordpress environment
 For development on this tool itself, you can also install from a local directory.
 
 ```bash
-npx @wordpress/create-block@latest --template ./path/to/storepress/create-plugin-html my-extension-name
+npx -y @wordpress/create-block@latest --template ./path/to/storepress/create-plugin-html --no-wp-scripts my-html-extension-name && cd "$_"
 ```
 
 ### Add Tests

package/index.js

@@ -1,140 +1,146 @@
 /**
  * External dependencies
  */
-const { join } = require('path')
+const {join} = require('path')
 
 // two-words
-function kebabCase (input) {
-  const regex = /[-._\s+]/gi
-  return input.replace(regex, '-').toLowerCase()
+function kebabCase(input) {
+    const regex = /[-._\s+]/gi
+    return input.replace(regex, '-').toLowerCase()
 }
 
-function constantCase (input) {
-  const regex = /[-._\s+]/gi
-  return input.replace(regex, '_').toUpperCase()
+function constantCase(input) {
+    const regex = /[-._\s+]/gi
+    return input.replace(regex, '_').toUpperCase()
 }
 
-function pascalStorePress (input) {
-  return 'storepress' === input ? 'StorePress' : input
+function pascalStorePress(input) {
+    return 'storepress' === input ? 'StorePress' : input
 }
 
-function pascalCase (input) {
-  return (input.match(/[a-zA-Z0-9]+/g) || []).map(w => `${w.charAt(0).toUpperCase()}${w.slice(1)}`).join('')
+function pascalCase(input) {
+    return (input.match(/[a-zA-Z0-9]+/g) || []).map(w => `${w.charAt(0).toUpperCase()}${w.slice(1)}`).join('')
 }
 
 module.exports = {
-  defaultValues: {
-    folderName: 'src',
-    namespace: 'storepress',
-    slug: 'plugin',
-    version: '0.0.1',
-    title: 'StorePress Plugin',
-    description: 'A StorePress Plugin',
-    author: 'EmranAhmed',
-    dashicon: 'pets',
-    category: 'storepress',
-    attributes: {},
-    license: 'GPL-2.0-or-later',
-    customScripts: {
-      'postinstall': 'git init -q && rm -rf ./.husky && npx husky init && echo "npx lint-staged" > .husky/pre-commit',
-
-      'prebuild': 'rm -rf ./build',
-      'build': 'npm run start -- --no-watch && wp-scripts build --webpack-copy-php --experimental-modules',
-
-      'check-engines': 'wp-scripts check-engines',
-      'check-licenses': 'wp-scripts check-licenses',
-
-      'format': 'wp-scripts format ./src',
-      'format:all': 'npm run format:php && npm run format:css && npm run format:js',
-      'format:js': 'wp-scripts format \'./src/**/*.js\'',
-      'format:css': 'wp-scripts format \'./src/**/*.scss\'',
-
-      'lint:css': 'wp-scripts lint-style \'./src/**/*.scss\'',
-      'lint:css:report': 'npm run lint:css -- --output-file scss-report.txt',
-      'lint:css:fix': 'npm run lint:css -- --fix',
-
-      'lint:js': 'wp-scripts lint-js --format=pretty \'./src/**/*.js\'',
-      'lint:js:report': 'npm run lint:js -- --format html --output-file lint-report.html',
-      'lint:js:fix': 'npm run lint:js -- --fix',
-
-      'lint:md:docs': 'wp-scripts lint-md-docs',
-      'lint:pkg-json': 'wp-scripts lint-pkg-json',
-
-      'packages-update': 'wp-scripts packages-update',
-
-      'prepackage': 'rm -rf ./${npm_package_name}.zip && npm run build',
-      'package': './tools/package.js',
-
-      'plugin-zip': 'npm run package -- --zip',
-
-      'test:e2e': 'wp-scripts test-e2e',
-      'test:unit': 'wp-scripts test-unit-js',
-
-      'start': 'rm -rf ./build && wp-scripts start --webpack-copy-php --experimental-modules',
+    defaultValues       : {
+        folderName         : 'src',
+        namespace          : 'storepress',
+        slug               : 'plugin',
+        version            : '0.0.1',
+        title              : 'StorePress Plugin',
+        description        : 'A StorePress Plugin',
+        author             : 'EmranAhmed',
+        dashicon           : 'pets',
+        category           : 'storepress',
+        attributes         : {},
+        license            : 'GPL-2.0-or-later',
+        customScripts      : {
+            'postinstall' : 'git init -q && rimraf .husky && npx husky init && echo "npx lint-staged" > .husky/pre-commit',
+
+            'prebuild' : 'rimraf build',
+            'build'    : 'npm run start -- --no-watch && wp-scripts build --webpack-copy-php --experimental-modules',
+
+            'check-engines'  : 'wp-scripts check-engines',
+            'check-licenses' : 'wp-scripts check-licenses',
+
+            'format'     : 'wp-scripts format ./src',
+            'format:all' : 'npm run format:php && npm run format:css && npm run format:js',
+            'format:js'  : 'wp-scripts format \'./src/**/*.js\'',
+            'format:css' : 'wp-scripts format \'./src/**/*.scss\'',
+
+            'lint:css'        : 'wp-scripts lint-style \'./src/**/*.scss\'',
+            'lint:css:report' : 'npm run lint:css -- --output-file scss-report.txt',
+            'lint:css:fix'    : 'npm run lint:css -- --fix',
+
+            'lint:js'        : 'wp-scripts lint-js --format=pretty \'./src/**/*.js\'',
+            'lint:js:report' : 'npm run lint:js -- --format html --output-file lint-report.html',
+            'lint:js:fix'    : 'npm run lint:js -- --fix',
+
+            'lint:md:docs'  : 'wp-scripts lint-md-docs',
+            'lint:pkg-json' : 'wp-scripts lint-pkg-json',
+
+            "packages-install:all"       : "node ./tools/packages-install.js",
+            "packages-update:storepress" : "node ./tools/packages-update.js",
+
+            "packages-update" : "wp-scripts packages-update && npm run packages-update:storepress && npm run packages-install:all",
+
+            'prepackage' : 'rimraf ${npm_package_name}.zip && npm run build',
+            'package'    : 'node ./tools/package.js',
+
+            'plugin-zip' : 'npm run package -- --zip',
+
+            'test:e2e'  : 'wp-scripts test-e2e',
+            'test:unit' : 'wp-scripts test-unit-js',
+
+            'start' : 'rimraf build && wp-scripts start --webpack-copy-php --experimental-modules',
+        },
+        npmDependencies    : [
+            '@storepress/utils',
+        ],
+        npmDevDependencies : [
+            '@wordpress/scripts',
+            '@woocommerce/dependency-extraction-webpack-plugin',
+            '@woocommerce/eslint-plugin',
+            '@wordpress/base-styles',
+            '@wordpress/dependency-extraction-webpack-plugin',
+            'eslint-plugin-you-dont-need-lodash-underscore',
+            'husky',
+            'lint-staged',
+            "prettier@npm:wp-prettier",
+            'fs-extra',
+            'webpack-remove-empty-scripts',
+            'eslint-plugin-prettier@5.2.1',
+            'eslint-formatter-pretty',
+            'rimraf',
+        ],
+        customPackageJSON  : {
+            'publishConfig' : {
+                'access' : 'public',
+            },
+            'sideEffects'   : [
+                'src/**',
+            ],
+            'main'          : 'build/index.js',
+            'module'        : 'src/index.js',
+            'files'         : [
+                'src/**',
+            ],
+            'zip'           : [
+                'build/**',
+                'index.html',
+                'global-style.css',
+            ],
+        },
+        transformer        : (view) => {
+            const todayDate         = new Date().toJSON().slice(0, 10)
+            const pascaleNamespace  = pascalCase(pascalStorePress(view.namespace))
+            const constantNamespace = constantCase(view.namespace)
+            const kebabNamespace    = kebabCase(view.namespace)
+            const constantSlug      = constantCase(view.slug) // TWO_WORDS
+            const kebabSlug         = kebabCase(view.slug) // two-words
+            const pascaleSlug       = pascalCase(pascalStorePress(view.slug)) // 'TwoWords'
+            return {
+                ...view,
+                name              : `@${kebabNamespace}/${kebabSlug}`,
+                todayDate         : todayDate,
+                constantNamespace : constantNamespace,
+                kebabNamespace    : kebabNamespace,
+                pascaleNamespace  : pascaleNamespace,
+
+                constantSlug : constantSlug,
+                kebabSlug    : kebabSlug,
+                pascaleSlug  : pascaleSlug,
+
+                GITHUB_REPOSITORY_NAME   : '${{ github.event.repository.name }}',
+                GITHUB_RELEASE_NAME      : '${{ env.RELEASE_NAME }}',
+                GITHUB_RELEASE_TAG       : '${{ env.RELEASE_TAG }}',
+                GITHUB_TOKEN             : '${{ secrets.GITHUB_TOKEN }}',
+                GITHUB_PAGE_URL          : '${{ steps.deployment.outputs.page_url }}',
+                GITHUB_CHANGELOG_CONTENT : "${{ steps.changelog.outputs.changelog }}",
+            }
+        },
     },
-    npmDependencies: [
-      '@storepress/utils',
-    ],
-    npmDevDependencies: [
-      '@wordpress/scripts',
-      '@woocommerce/dependency-extraction-webpack-plugin',
-      '@woocommerce/eslint-plugin',
-      '@wordpress/base-styles',
-      '@wordpress/dependency-extraction-webpack-plugin',
-      'eslint-plugin-you-dont-need-lodash-underscore',
-      'husky',
-      'lint-staged',
-      "prettier@npm:wp-prettier",
-      'fs-extra',
-      'webpack-remove-empty-scripts',
-      'eslint-plugin-prettier',
-      'eslint-formatter-pretty@5',
-    ],
-    customPackageJSON: {
-      'publishConfig': {
-        'access': 'public',
-      },
-      'sideEffects': [
-        'src/**',
-      ],
-      'main': 'build/index.js',
-      'module': 'src/index.js',
-      'files': [
-        'src/**',
-      ],
-      'zip': [
-        'build/**',
-        'index.html',
-        'global-style.css',
-      ],
-    },
-    transformer: (view) => {
-      const todayDate = new Date().toJSON().slice(0, 10)
-      const pascaleNamespace = pascalCase(pascalStorePress(view.namespace))
-      const constantNamespace = constantCase(view.namespace)
-      const kebabNamespace = kebabCase(view.namespace)
-      const constantSlug = constantCase(view.slug) // TWO_WORDS
-      const kebabSlug = kebabCase(view.slug) // two-words
-      const pascaleSlug = pascalCase(pascalStorePress(view.slug)) // 'TwoWords'
-      return {
-        ...view,
-        name: `@${kebabNamespace}/${kebabSlug}`,
-        todayDate: todayDate,
-        constantNamespace: constantNamespace,
-        kebabNamespace: kebabNamespace,
-        pascaleNamespace: pascaleNamespace,
-
-        constantSlug: constantSlug,
-        kebabSlug: kebabSlug,
-        pascaleSlug: pascaleSlug,
-        GITHUB_REPOSITORY_NAME: '${{ github.event.repository.name }}',
-        GITHUB_RELEASE_NAME: '${{ env.RELEASE_NAME }}',
-        GITHUB_RELEASE_TAG: '${{ env.RELEASE_TAG }}',
-        GITHUB_TOKEN: '${{ secrets.GITHUB_TOKEN }}',
-        GITHUB_PAGE_URL: '${{ steps.deployment.outputs.page_url }}',
-      }
-    },
-  },
-  pluginTemplatesPath: join(__dirname, 'plugin-templates'),
-  blockTemplatesPath: join(__dirname, 'block-templates'),
+    pluginTemplatesPath : join(__dirname, 'plugin-templates'),
+    blockTemplatesPath  : join(__dirname, 'block-templates'),
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@storepress/create-plugin-html",
-	"version": "0.0.4",
+	"version": "0.0.6",
 	"description": "A template to be used with `@wordpress/create-block` to create a StorePress HTML based JS Extension.",
 	"author": "StorePress",
 	"main": "index.js",

package/plugin-templates/.github/workflows/release.yaml.mustache

@@ -25,6 +25,7 @@ jobs:
   # - Make Zip
   # - Get Release Version
   # - Get Release Filename
+  # - Get Changelog
   # - Make Release
 
   build:
@@ -53,11 +54,19 @@ jobs:
         run: |
           echo "RELEASE_NAME=$(node -p -e "require('./package.json').name")" >> $GITHUB_ENV
 
+      - name: "Get Changelog"
+        id: changelog
+        run: |
+            echo "changelog<<EOF" >> $GITHUB_OUTPUT
+            node ./tools/changelog.js >> $GITHUB_OUTPUT
+            echo "EOF" >> $GITHUB_OUTPUT
+
       - name: "Make Release"
         uses: softprops/action-gh-release@v2
         with:
           files: ./{{ GITHUB_RELEASE_NAME }}.zip
           make_latest: true
           name: Release - v{{ GITHUB_RELEASE_TAG }}
+          body: {{ GITHUB_CHANGELOG_CONTENT }}
         env:
           GITHUB_TOKEN: {{ GITHUB_TOKEN }}

package/plugin-templates/.gitignore.mustache

@@ -13,7 +13,7 @@ project.properties
 *.sublime-project
 *.sublime-workspace
 .sublimelinterrc
-.husky/_
+.husky
 src/block.json
 
 # Sass

package/plugin-templates/README.md.mustache

@@ -3,8 +3,11 @@
 {{description}}
 
 ## Development
+
 - `npm i`
-- `npm run packages-update` - Update WordPress packages
+- `npm run packages-update`  - Update WordPress packages
+- `npm run build`            - Build
+- `npx -y http-server`       - Start Server
 
 ## Develop
 

package/plugin-templates/changelog.txt.mustache

@@ -0,0 +1,12 @@
+*** {{title}} ***
+
+2023-09-30 - version 1.0.0
+* Added - add msg
+* Update - update msg
+* Fixed - fix msg
+* Tweak - what we tweak
+* Enhancement - add action / add filter
+* Performance - if any performance added
+
+2023-09-18 - version 1.0.0
+* Initial release

package/plugin-templates/index.html.mustache

@@ -6,6 +6,23 @@
 	<title>{{title}}</title>
 	<link rel="stylesheet" href="./global-style.css" />
 	<link rel="stylesheet" href="./build/style-plugin.css" />
+
+    <script type="importmap">
+        {
+          "imports":
+              {
+                  "@storepress/utils":"./build/storepress-utils-module.js"
+                  "@huggingface/transformers":"https://esm.sh/@huggingface/transformers"
+                  "@babycommando/entity-db":"https://esm.sh/@babycommando/entity-db"
+              }
+        }
+    </script>
+
+    <link rel="modulepreload" href="./build/storepress-utils-module.js" />
+    <link rel="modulepreload" href="https://esm.sh/@huggingface/transformers" />
+    <link rel="modulepreload" href="https://esm.sh/@babycommando/entity-db" />
+
+    <script type="module" src="./custom-module.js"></script>
 </head>
 
 <body>

package/plugin-templates/tools/changelog.js.mustache

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+'use strict'
+/**
+ * External dependencies
+ */
+const fs = require('fs-extra')
+const { stdout } = require('process')
+
+/**
+ * Internal dependencies
+ */
+
+const {
+	getPackageProp,
+	fromProjectRoot,
+} = require('@wordpress/scripts/utils')
+
+const version = getPackageProp('version')
+
+const changelogFile = fromProjectRoot('changelog.txt')
+
+// 2. Read and find the changelog entry for the current version.
+const changelogJs = fs.readFileSync(changelogFile, 'utf8')
+const lines = changelogJs.split('\n')
+const changelogEntry = []
+let inSection = false
+const versionString = `version ${version}`
+const dateRegex = /^\d{4}-\d{2}-\d{2}/
+
+for (const line of lines) {
+	if (inSection) {
+		if (dateRegex.test(line) && !line.includes(versionString)) {
+			break
+		}
+		changelogEntry.push(line)
+	} else if (line.includes(versionString)) {
+		inSection = true
+		// continue
+		// changelogEntry.push(line)
+	}
+}
+
+if (changelogEntry.length === 0) {
+	changelogEntry.push(`- No changelog entry for version ${version}.\n\n`)
+}
+
+// 3. Prepare the final output string
+const finalOutput = changelogEntry.join('\n').trim()
+
+// 4. Check if running in GitHub Actions environment
+/*if (process.env.GITHUB_OUTPUT) {
+	// If yes, write to the GITHUB_OUTPUT file to set an output variable
+	// The format `key<<DELIMITER` is used for multiline strings
+	fs.appendFileSync(process.env.GITHUB_OUTPUT, `changelog_body<<EOF\n${finalOutput}\nEOF\n`)
+} else {
+	stdout.write(`${finalOutput}\n`)
+}*/
+
+stdout.write(`## What's Changed\n\n`)
+stdout.write(`${finalOutput}\n`)

package/plugin-templates/tools/packages-install.js.mustache

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+/**
+ * External dependencies
+ */
+const fs = require('fs')
+const spawn = require('cross-spawn')
+
+/**
+ * Internal dependencies
+ */
+const {
+	getArgFromCLI,
+} = require('@wordpress/scripts/utils')
+
+/**
+ * Constants
+ */
+
+function readJSONFile (fileName) {
+	const data = fs.readFileSync(fileName, 'utf8')
+	return JSON.parse(data)
+}
+
+const EXACT_VERSION_PACKAGES = {
+	'eslint-formatter-pretty':'5.0.0',
+	'eslint-plugin-prettier':'^5.5.4',
+	'prettier':'npm:wp-prettier@3.0.3',
+}
+
+function getAllPackages ({ dependencies = {}, devDependencies = {} }) {
+	return Object.keys(dependencies).concat(Object.keys(devDependencies)).filter((packageName) => true)
+}
+
+function getPackageVersionDiff (initialPackageJSON, finalPackageJSON) {
+	const diff = ['dependencies', 'devDependencies'].reduce(
+		(result, keyPackageJSON) => {
+			return Object.keys(
+				finalPackageJSON[keyPackageJSON] || {},
+			).reduce((_result, dependency) => {
+				const initial =
+					initialPackageJSON[keyPackageJSON][dependency]
+				const final = finalPackageJSON[keyPackageJSON][dependency]
+				if (initial !== final) {
+					_result.push({ dependency, initial, final })
+				}
+				return _result
+			}, result)
+		},
+		[],
+	)
+	return diff.sort((a, b) => a.dependency.localeCompare(b.dependency))
+}
+
+function updatePackagesToLatestVersion (packages) {
+	const distTag = getArgFromCLI('--dist-tag') || 'latest'
+
+	const packagesWithLatest = packages.map(
+		(packageName) => {
+
+			const tag = EXACT_VERSION_PACKAGES[packageName] || distTag
+
+			return `${packageName}@${tag}`
+		},
+	)
+
+	return spawn.sync('npm', ['install', ...packagesWithLatest, '--save'], {
+		stdio: 'inherit',
+	})
+}
+
+function outputPackageDiffReport (packageDiff) {
+	console.log(
+		[
+			'The following package versions were changed:',
+			...packageDiff.map(({ dependency, initial, final }) => {
+				return `${dependency}: ${initial} -> ${final}`
+			}),
+		].join('\n'),
+	)
+}
+
+function updatePackageJSON () {
+	const initialPackageJSON = readJSONFile('package.json')
+	const packages = getAllPackages(initialPackageJSON)
+
+	const result = updatePackagesToLatestVersion(packages)
+
+
+	const finalPackageJSON = readJSONFile('package.json')
+	outputPackageDiffReport(
+		getPackageVersionDiff(initialPackageJSON, finalPackageJSON),
+	)
+	process.exit(result.status)
+}
+
+updatePackageJSON()
+/* eslint-enable no-console */

package/plugin-templates/tools/packages-update.js.mustache

@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+/**
+ * External dependencies
+ */
+const fs = require('fs')
+const spawn = require('cross-spawn')
+
+/**
+ * Internal dependencies
+ */
+const {
+	getArgFromCLI,
+} = require('@wordpress/scripts/utils')
+
+/**
+ * Constants
+ */
+
+const PACKAGES_PREFIX = ['@storepress/']
+
+function readJSONFile (fileName) {
+	const data = fs.readFileSync(fileName, 'utf8')
+	return JSON.parse(data)
+}
+
+function getStorePressPackages ({ dependencies = {}, devDependencies = {} }) {
+	return Object.keys(dependencies).concat(Object.keys(devDependencies)).filter((packageName) => {
+		return PACKAGES_PREFIX.some((prefix) => packageName.startsWith(prefix))
+	})
+}
+
+function getPackageVersionDiff (initialPackageJSON, finalPackageJSON) {
+	const diff = ['dependencies', 'devDependencies'].reduce(
+		(result, keyPackageJSON) => {
+			return Object.keys(
+				finalPackageJSON[keyPackageJSON] || {},
+			).reduce((_result, dependency) => {
+				const initial =
+					initialPackageJSON[keyPackageJSON][dependency]
+				const final = finalPackageJSON[keyPackageJSON][dependency]
+				if (initial !== final) {
+					_result.push({ dependency, initial, final })
+				}
+				return _result
+			}, result)
+		},
+		[],
+	)
+	return diff.sort((a, b) => a.dependency.localeCompare(b.dependency))
+}
+
+function updatePackagesToLatestVersion (packages) {
+	const distTag = getArgFromCLI('--dist-tag') || 'latest'
+
+	const packagesWithLatest = packages.map(
+		(packageName) => `${packageName}@${distTag}`,
+	)
+
+	return spawn.sync('npm', ['install', ...packagesWithLatest, '--save'], {
+		stdio: 'inherit',
+	})
+}
+
+function outputPackageDiffReport (packageDiff) {
+	console.log(
+		[
+			'The following package versions were changed:',
+			...packageDiff.map(({ dependency, initial, final }) => {
+				return `${dependency}: ${initial} -> ${final}`
+			}),
+		].join('\n'),
+	)
+}
+
+function updatePackageJSON () {
+	const initialPackageJSON = readJSONFile('package.json')
+	const packages = getStorePressPackages(initialPackageJSON)
+
+	const result = updatePackagesToLatestVersion(packages)
+
+	const finalPackageJSON = readJSONFile('package.json')
+	outputPackageDiffReport(
+		getPackageVersionDiff(initialPackageJSON, finalPackageJSON),
+	)
+	process.exit(result.status)
+}
+
+updatePackageJSON()
+/* eslint-enable no-console */

package/plugin-templates/tools/webpack-helpers.js.mustache

@@ -2,29 +2,78 @@
 /**
  * External dependencies
  */
-const { getProjectSourcePath } = require( '@wordpress/scripts/utils/config' );
-const { fromProjectRoot } = require( '@wordpress/scripts/utils/file' );
-const { sep } = require( 'path' );
+const {getProjectSourcePath} = require('@wordpress/scripts/utils/config');
+const {fromProjectRoot}      = require('@wordpress/scripts/utils/file');
+const {sep}                  = require('path');
 
 // jquery --> window.jQuery
 // react-dom --> window.ReactDOM
 // Add `slick-carousel`, `@woocommerce/blocks-registry`,`@woocommerce/settings` on `.eslintrc.js` -> 'import/core-modules'
 const externalScriptsMap = {
-    '@storepress/utils' : ['StorePress','Utils'],
+    '@storepress/utils' : ['StorePress', 'Utils'],
 };
 
 // @babel/runtime/regenerator --> wp-polyfill
 const scriptHandleMap = {
-     '@storepress/utils' : 'storepress-utils',
+    '@storepress/utils' : 'storepress-utils',
 };
 
 const externalModulesMap = {
-	//  static import.
-	// '@wordpress/interactivity': 'module @wordpress/interactivity',
-	// dynamic import.
-	// @see: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/query/view.js#L36
-	// '@wordpress/interactivity-router': 'import @wordpress/interactivity-router',
-};
+          //  1. static import.
+          // '@wordpress/a11y': 'import @wordpress/a11y',
+          // '@storepress/utils': 'import @storepress/utils',
+
+          // view.js <script type="module" src="./view.js"></script>
+          // import { ... } from '@storepress/utils';
+
+          // 2. dynamic import.
+          // '@storepress/utils': 'module @storepress/utils',
+
+          // view.js <script type="module" src="./view.js"></script>
+          // import('@storepress/utils').then(()=>{});
+          // OR
+          // const config = await fetch('../config.json').then(response => response.json());
+          // const driver = await import(`@storepress/utils`);
+          // driver.connect();
+
+    /*
+          ```html
+              <script type="importmap">
+                  {
+                    "imports":
+                        {
+                            "@wordpress/interactivity":"http://example.com/wp-includes/js/dist/script-modules/interactivity/index.min.js"
+                            "@storepress/utils":"./build/storepress-utils-module.js"
+                        }
+                  }
+              </script>
+
+              <link rel="modulepreload" href="http://example.com/wp-includes/js/dist/script-modules/interactivity/index.min.js" fetchpriority="low" />
+              <link rel="modulepreload" href="./build/storepress-utils-module.js" fetchpriority="low" />
+              ```*/
+
+          // in view.js
+          // ```js
+          // "import" prefix — static import (top-level, resolved at load time)
+          // import { store, getContext } from '@wordpress/a11y';
+          // ```
+
+          // dynamic import.
+          // @see: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/query/view.js#L40
+          // ```js
+          //  import('@wordpress/interactivity-router').then({});
+          // ```
+          // '@wordpress/interactivity-router': 'import @wordpress/interactivity-router',
+
+          // view.js
+
+          // "import" prefix — static import (top-level, resolved at load time)
+          //  import { store, getContext } from '@wordpress/interactivity';
+
+          // "module" prefix — dynamic import (lazy, resolved at runtime)
+          // const loadRouter = () => import('@wordpress/interactivity-router');
+      }
+;
 
 /**
  * Default request to global transformation
@@ -37,10 +86,10 @@ const externalModulesMap = {
  * @return {string|string[]|undefined} The resulting external definition. Return `undefined`
  *   to ignore the request. Return `string|string[]` to map the request to an external.
  */
-function requestToExternal( request ) {
-	if ( externalScriptsMap[ request ] ) {
-		return externalScriptsMap[ request ];
-	}
+function requestToExternal(request) {
+    if (externalScriptsMap[request]) {
+        return externalScriptsMap[request];
+    }
 }
 
 /**
@@ -54,10 +103,10 @@ function requestToExternal( request ) {
  * @return {string|undefined} WordPress script handle to map the request to. Return `undefined`
  *   to use the same name as the module.
  */
-function requestToHandle( request ) {
-	if ( scriptHandleMap[ request ] ) {
-		return scriptHandleMap[ request ];
-	}
+function requestToHandle(request) {
+    if (scriptHandleMap[request]) {
+        return scriptHandleMap[request];
+    }
 }
 
 /**
@@ -76,35 +125,35 @@ function requestToHandle( request ) {
  *   - Return `string` to map the request to an external.
  *   - Return `Error` to emit an error.
  */
-function requestToExternalModule( request ) {
-	if ( externalModulesMap[ request ] ) {
-		return externalModulesMap[ request ];
-	}
+function requestToExternalModule(request) {
+    if (externalModulesMap[request]) {
+        return externalModulesMap[request];
+    }
 }
 
-function getFile( fileName ) {
-	return fromProjectRoot( getProjectSourcePath() + sep + fileName );
+function getFile(fileName) {
+    return fromProjectRoot(getProjectSourcePath() + sep + fileName);
 }
 
-function getRootFile( fileName ) {
-	return fromProjectRoot( fileName );
+function getRootFile(fileName) {
+    return fromProjectRoot(fileName);
 }
 
 function getWebPackAlias() {
-	return {
-		// '@utils': getFile('utils/Plugin'), // Add @utils on .eslintrc.js -> 'import/core-modules'
-		//'@storepress/icons': getFile('packages/icons'),
-		//'@storepress/utils': getFile('packages/utils'),
-		//'@storepress/components': getFile('packages/components'),
-		'@{{kebabNamespace}}/{{kebabSlug}}': getFile('index.js'),
-	};
+    return {
+        // '@utils': getFile('utils/Plugin'), // Add @utils on .eslintrc.js -> 'import/core-modules'
+        //'@storepress/icons': getFile('packages/icons'),
+        //'@storepress/utils': getFile('packages/utils'),
+        //'@storepress/components': getFile('packages/components'),
+        '@{{kebabNamespace}}/{{kebabSlug}}' : getFile('index.js'),
+    };
 }
 
 module.exports = {
-	getFile,
-	getRootFile,
-	getWebPackAlias,
-	requestToExternal,
-	requestToHandle,
-	requestToExternalModule,
+    getFile,
+    getRootFile,
+    getWebPackAlias,
+    requestToExternal,
+    requestToHandle,
+    requestToExternalModule,
 };

package/plugin-templates/webpack.config.js.mustache

@@ -65,6 +65,12 @@ const moduleConfig = {
 	entry: {
 		// ...defaultModuleConfig.entry(),
 		// 'custom-module': getFile( 'custom-module.js' ),
+        /*'storepress-utils-module': {
+            import: '@storepress/utils/build-module/index.js',
+            library: {
+                type: 'module',
+            },
+        }*/
 	},
 
 	resolve: {