@storepress/create-plugin-html 0.0.3 → 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,7 +84,7 @@ module.exports = {
       'eslint-plugin-you-dont-need-lodash-underscore',
       'husky',
       'lint-staged',
-      "prettier@npm:wp-prettier@latest",
+      "prettier@npm:wp-prettier",
       'fs-extra',
       'webpack-remove-empty-scripts',
       'eslint-plugin-prettier',
@@ -100,12 +100,13 @@ module.exports = {
       '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)
@@ -117,6 +118,7 @@ module.exports = {
       const pascaleSlug = pascalCase(pascalStorePress(view.slug)) // 'TwoWords'
       return {
         ...view,
+        name: `@${kebabNamespace}/${kebabSlug}`,
         todayDate: todayDate,
         constantNamespace: constantNamespace,
         kebabNamespace: kebabNamespace,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@storepress/create-plugin-html",
-	"version": "0.0.3",
+	"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/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/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