@storepress/create-plugin-html 0.0.2 → 0.0.4

package/README.md

@@ -14,6 +14,7 @@ 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

package/block-templates/Plugin.js.mustache

@@ -46,7 +46,6 @@ export function Plugin (element, options) {
   }
 
   const removeEvents = () => {
-
     this.controller.abort('Reset')
   }
 
@@ -68,7 +67,10 @@ export function Plugin (element, options) {
   const init = () => {
     this.$element = element
     this.settings = {
-      ...DEFAULTS, ...options, ...getOptionsFromAttribute(this.$element, ATTRIBUTE), ...PRIVATE,
+      ...DEFAULTS,
+      ...options,
+      ...getOptionsFromAttribute(this.$element, ATTRIBUTE),
+      ...PRIVATE,
     }
 
     this.controller = new AbortController()

package/block-templates/index.js.mustache

@@ -1,89 +1,20 @@
 /**
  * External dependencies
  */
-import { createPluginInstance, triggerEvent, getPluginInstance } from '@storepress/utils'
+import { createStorePressPlugin } from '@storepress/utils';
 
 /**
  * Internal dependencies
  */
-import { Plugin as Instance } from './Plugin'
+import { Plugin } from './Plugin';
 
-export default function {{pascaleSlug}}Plugin () {
-  const Plugin = {
-    createInstance (element, options) {
-      return createPluginInstance(element, options, Instance)
-    },
+const {{pascaleSlug}} = createStorePressPlugin( {
+	selector: '[data-{{kebabSlug}}]',
+	options: {},
+	plugin: Plugin,
+	namespace: '{{pascaleSlug}}',
+} );
 
-    getInstance (element) {
-      return getPluginInstance(element)
-    },
+{{pascaleSlug}}.setup();
 
-    init ($selector, options) {
-      for (const { element, reset } of this.createInstance($selector, options)) {
-        element.addEventListener('destroy', reset)
-      }
-    },
-
-    destroy ($selector) {
-      for (const { destroy } of this.getInstance($selector)) {
-        destroy()
-      }
-    },
-
-    reload ($selector, options) {
-      this.destroy($selector)
-      this.init($selector, options)
-    },
-  }
-
-  document.addEventListener('storepress_plugin_init', (event) => {
-
-    const defaultSettings = {}
-    const settings = { ...defaultSettings, ...event.detail?.settings }
-    const element = event.detail?.element
-
-    if (Array.isArray(element)) {
-      for (const el of element) {
-        Plugin.init(el, settings)
-      }
-    } else {
-      Plugin.init(element, settings)
-    }
-  }, { passive: true })
-
-  document.addEventListener('storepress_plugin_destroy', (event) => {
-
-    const element = event.detail?.element
-
-    if (Array.isArray(element)) {
-      for (const el of element) {
-        Plugin.destroy(el)
-      }
-    } else {
-      Plugin.destroy(element)
-    }
-
-  }, { passive: true })
-
-  document.addEventListener('storepress_plugin_reload', (event) => {
-    const defaultSettings = {}
-    const settings = { ...defaultSettings, ...event.detail?.settings }
-    const element = event.detail?.element
-
-    if (Array.isArray(element)) {
-      for (const el of element) {
-        Plugin.reload(el, settings)
-      }
-    } else {
-      Plugin.reload(element, settings)
-    }
-  }, { passive: true })
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  {{pascaleSlug}}Plugin()
-  triggerEvent(document, 'storepress_plugin_init', {
-    element: ['[data-plugin-settings]'],
-    settings: {},
-  })
-})
+export default {{pascaleSlug}};

package/block-templates/style.scss.mustache

@@ -4,7 +4,7 @@
 
 $default-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
-:where([data-plugin-settings]) {
+:where([data-{{kebabSlug}}]) {
   font-family: $default-font;
 
   @include plugin.init();

package/index.js

@@ -84,6 +84,7 @@ module.exports = {
       'eslint-plugin-you-dont-need-lodash-underscore',
       'husky',
       'lint-staged',
+      "prettier@npm:wp-prettier",
       'fs-extra',
       'webpack-remove-empty-scripts',
       'eslint-plugin-prettier',
@@ -96,29 +97,16 @@ module.exports = {
       'sideEffects': [
         'src/**',
       ],
-      'lint-staged': {
-        './src/**/*.scss': [
-          'npm run lint:css',
-        ],
-        './src/**/*.{js,ts,tsx}': [
-          'npm run lint:js',
-        ],
-        './*.md': [
-          'npm run lint:md:docs',
-        ],
-        './package.json': [
-          'npm run lint:pkg-json',
-        ],
-      },
       'main': 'build/index.js',
       'module': 'src/index.js',
       'files': [
-        'build/**',
         'src/**',
       ],
-      'bin': {
-        'package': './tools/package.js',
-      },
+      'zip': [
+        'build/**',
+        'index.html',
+        'global-style.css',
+      ],
     },
     transformer: (view) => {
       const todayDate = new Date().toJSON().slice(0, 10)
@@ -130,6 +118,7 @@ module.exports = {
       const pascaleSlug = pascalCase(pascalStorePress(view.slug)) // 'TwoWords'
       return {
         ...view,
+        name: `@${kebabNamespace}/${kebabSlug}`,
         todayDate: todayDate,
         constantNamespace: constantNamespace,
         kebabNamespace: kebabNamespace,
@@ -138,6 +127,11 @@ module.exports = {
         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 }}',
       }
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@storepress/create-plugin-html",
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"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/deploy-github-pages.yaml.mustache

@@ -26,27 +26,27 @@ jobs:
   deploy:
     environment:
       name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
+      url: {{ GITHUB_PAGE_URL }}
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
+      - name: "Checkout"
         uses: actions/checkout@v4
-      # Set up Node
-      - name: Setup Node
+
+      - name: "Setup Node"
         uses: actions/setup-node@v4
         with:
-          node-version: 18
-      - name: Install and Build
+          node-version: '20.x'
+
+      - name: "Install and Build"
         run: |
           npm install
           npm run build
-      #- name: Setup Pages
-      #  uses: actions/configure-pages@v5
-      - name: Upload artifact
+          rm -rf node_modules
+
+      - name: "Upload Page Contents"
         uses: actions/upload-pages-artifact@v3
         with:
-          # Upload entire repository
           path: '.'
-      - name: Deploy to GitHub Pages
+      - name: "Deploy to GitHub Pages"
         id: deployment
         uses: actions/deploy-pages@v4

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

@@ -10,23 +10,22 @@ on:
 permissions: write-all
 
 env:
-  REPOSITORY_NAME: ${{ github.event.repository.name }}
+  REPOSITORY_NAME: {{ GITHUB_REPOSITORY_NAME }}
 
 name: Release
 
 jobs:
 
-
   # Build distribution release.
   #
   # Performs the following steps:
-  # - Checks out the repository.
-  # - Set up PHP.
-  # - Install PHP Dependencies.
-  # - Setup and Install Node.js.
-  # - Make Zip.
-  # - Upload Release.
-
+  # - Checks out the repository
+  # - Setup and Install Node.js
+  # - NPM Install
+  # - Make Zip
+  # - Get Release Version
+  # - Get Release Filename
+  # - Make Release
 
   build:
     name: Release
@@ -39,24 +38,26 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '20.x'
-      - run: npm clean-install
+
+      - name: "NPM Install"
+        run: npm install
 
       - name: "Make Zip"
         run: npm run plugin-zip --if-present
 
-      - name: "Get release version."
+      - name: "Get Release Version"
         run: |
           echo "RELEASE_TAG=$(node -p -e "require('./package.json').version")" >> $GITHUB_ENV
 
-      - name: "Get release file base name."
+      - name: "Get Release Filename"
         run: |
           echo "RELEASE_NAME=$(node -p -e "require('./package.json').name")" >> $GITHUB_ENV
 
-      - name: "Upload Release"
+      - name: "Make Release"
         uses: softprops/action-gh-release@v2
         with:
-          files: ./${{ env.RELEASE_NAME }}.zip
+          files: ./{{ GITHUB_RELEASE_NAME }}.zip
           make_latest: true
-          name: Release - v${{ env.RELEASE_TAG }}
+          name: Release - v{{ GITHUB_RELEASE_TAG }}
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: {{ GITHUB_TOKEN }}

package/plugin-templates/.npmrc.mustache

@@ -1 +1 @@
-
+package-lock=false

package/plugin-templates/index.html.mustache

@@ -4,14 +4,14 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>{{title}}</title>
+	<link rel="stylesheet" href="./global-style.css" />
 	<link rel="stylesheet" href="./build/style-plugin.css" />
-	<link rel="stylesheet" href="./style.css" />
 </head>
 
 <body>
 
 <div class="wrapper">
-	<div data-plugin-settings="{'greet': 'Hello'}">Hello ( Check Browser Console )</div>
+	<div data-{{kebabSlug}}="{'greet': 'Hello'}">Hello ( Check Browser Console )</div>
 </div>
 
 <script src="./build/storepress-utils.js"></script>

package/plugin-templates/lint-staged.config.js.mustache

@@ -0,0 +1,6 @@
+module.exports = {
+	'./package.json': ['npm run lint:pkg-json'],
+	'./*.md': ['npm run lint:md:docs'],
+	'./src/**/*.scss': ['npm run lint:css'],
+	'./src/**/*.{js,ts,tsx}': ['npm run lint:js'],
+};

package/plugin-templates/script.js.mustache

@@ -0,0 +1,8 @@
+/**
+ * External dependencies
+ */
+import {{pascaleSlug}} from '@{{kebabNamespace}}/{{kebabSlug}}';
+
+document.addEventListener( 'DOMContentLoaded', () => {
+  {{pascaleSlug}}.init();
+} );

package/plugin-templates/style.scss.mustache

@@ -0,0 +1,10 @@
+@charset "UTF-8";
+
+@use "./src/mixins" as plugin;
+
+:where([data-{{kebabSlug}}]) {
+  @include plugin.init();
+  & {
+    --custom-variable: 1px;
+  }
+}

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

@@ -27,12 +27,12 @@ const isZip = hasArgInCLI('--zip');
 
 let files = [];
 
-if (hasPackageProp('files')) {
+if (hasPackageProp('zip')) {
 	stdout.write(
 		'Using the `files` field from `package.json` to detect files:\n\n'
 	);
 
-	files = glob(getPackageProp('files'), {
+	files = glob(getPackageProp('zip'), {
 		caseSensitiveMatch: false,
 	});
 } else {

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

@@ -86,17 +86,23 @@ function getFile( fileName ) {
 	return fromProjectRoot( getProjectSourcePath() + sep + 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'),
 	};
 }
 
 module.exports = {
 	getFile,
+	getRootFile,
 	getWebPackAlias,
 	requestToExternal,
 	requestToHandle,

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

@@ -7,6 +7,7 @@ const {
 	requestToHandle,
 	requestToExternalModule,
 	getFile,
+	getRootFile,
 	getWebPackAlias,
 } = require( './tools/webpack-helpers' );
 const WoocommerceDependencyExtractionWebpackPlugin = require( '@woocommerce/dependency-extraction-webpack-plugin' );
@@ -17,8 +18,8 @@ const scriptConfig = {
 	...defaultJSConfig,
 	entry: {
 		[`plugin`]: [
-			getFile('style.scss'),
-			getFile('index.js'),
+			getRootFile('style.scss'),
+			getRootFile('script.js'),
         ],
         'storepress-utils': {
 			import: '@storepress/utils/build-module/index.js',

package/plugin-templates/.husky/pre-commit.mustache

@@ -1 +0,0 @@
-npx lint-staged