Merge pull request #7 from kuno1/feature/strategy-and-screen

Feature/strategy and screen
kuno1 · Feb 5, 2025 · f4a83eb · f4a83eb
2 parents 79e17d8 + e1acf00
commit f4a83eb
Show file tree

Hide file tree

Showing 21 changed files with 41,147 additions and 125 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,32 @@
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+# WordPress Coding Standards
+# https://make.wordpress.org/core/handbook/coding-standards/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+
+[*.scss]
+indent_style = tab
+indent_size = 4
+
+[*.php]
+indent_style = tab
+indent_size = 4
+
+[*.yml]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
+
+[{*.txt,wp-config-sample.php}]
+end_of_line = crlf
diff --git a/.github/workflows/npm.yml b/.github/workflows/npm.yml
@@ -2,8 +2,6 @@ name: Grab deps test.
 
 on:
   push:
-    branches:
-      - master
     tags:
       - '*'
   pull_request:
@@ -18,11 +16,14 @@ jobs:
     steps:
       - uses: actions/checkout@master
 
-      - uses: actions/setup-node@v3
+      # See {https://github.com/marketplace/actions/setup-node-js-for-use-with-actions}
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: '18.20.6'
 
-      - run: npm install
+      - name: Install dependencies
+        run: npm install
 
-      - run: npm test
-  # See {https://github.com/marketplace/actions/setup-node-js-for-use-with-actions}
+      - name: Run test suit
+        run: npm test
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,3 @@
-package-lock.json
 node_modules
 wp-dependencies.json
+test/dist/
diff --git a/README.md b/README.md
@@ -1,7 +1,6 @@
-# grab-deps
+# @kunoichi/grab-deps
 
-WordPress library to extract dependencies information from js/css 
-files.
+A toolset to extract dependencies information from js/css files in WordPress Development.
 
 ![TEST](https://github.com/kuno1/grab-deps/workflows/Grab%20deps%20test./badge.svg?branch=master)
 
@@ -10,9 +9,72 @@ This library dump `wp-dependencies.json` which includes dependencies and path in
 - You don't have to specify dependencies from php files.
 - You can automate the registration & enqueue of assets.
 
-## Example
+## Installation
+
+```bash
+npm install @kunoichi/grab-deps
+```
+
+## Usage
+
+Suppose that the directory structure of your theme/plugin is like below:
+
+```bash
+assets
+- js
+  - main.js
+- css
+  - style.css
+```
+
+And run this in your [npm scripts](https://docs.npmjs.com/misc/scripts) or [gulpfile.js](https://gulpjs.com/).
+
+### NPM Scripts
+
+Since version 2.0.0, CLI inter face is available.
+If you need traspiling JavaScripts with [@wordpress/scripts](https://www.npmjs.com/package/@wordpress/scripts), add dependencies.
+
+```json
+{
+	"dependencies": {
+		"@kunoichi/grab-deps": "^2.0.0",
+		"@wordpress/sripts": "^27.0.0"
+	},
+	"scripts": {
+	"dump": "grab-deps assets",
+	"transpile": "grab-deps js src/js assets/js"
+  }
+}
+```
+
+`grab-deps-image 'test/src/images/**/*.{jpg,png,gif,svg}' test/dist/images` is also available. See peer dependencies for more information.
+
+### Gulp
+
+```js
+// gulpfile.js
+const gulp = require( 'gulp' );
+const { dumpSetting } = require('@kunoichi/grab-deps');
+
+// Dump task.
+gulp.task( 'dump', function( done ) {
+  dumpSetting( 'assets' );
+  done();
+} );
+
+// Watch assets directory.
+gulp.task( 'watch', function () {
+  // Watch assets change and dump.
+  gulp.watch( [ 'assets/**/*.css', 'assets/**/*.js' ], gulp.task( 'dump' ) );
+} );
+```
+
+Now you can get updated dump information whatever changes you made for assets directory.
+
+## Register Assets in WordPress
 
 Suppose that you have `assets/js/app.js` in your theme folder.
+Add @params in license comment.
 
 ```js
 /*!
@@ -46,6 +108,7 @@ And you can get setting file `wp-dependencies.json` like this.
 Now you can bulk register assets through php.
 
 ```php
+// This code is in your theme's functions.php
 add_action( 'init', function() {
     // Load setting as array.
     $settings = json_decode( file_get_contents( __DIR__ . '/wp-dependencies.json' ), true );
@@ -56,7 +119,14 @@ add_action( 'init', function() {
         $url     = get_template_directory_uri() . '/' . $setting['path'];
         if ( 'js' === $setting['ext'] ) {
             // Register JavaScript.
+            $script_setting = [
+            	'in_footer' => $setting['footer'],
+            ];
+            if ( in_array( $setting['strategy'], [ 'async', 'defer' ], true ) ) {
+            	$script_setting['strategy'] = $setting['strategy'];
+            }
             wp_register_script( $handle, $url, $deps, $version, $setting['footer'] );
+            // You can do extra settings here.
         } else {
             // This is CSS.
             wp_register_style( $handle, $url, $deps, $version, $setting['media'] ); 
@@ -69,113 +139,92 @@ Now you can enqueue any of your scripts/styles with `wp_enqueue_script( 'my-app-
 
 ## Supported Header Info
 
-| Name     | Default                          | type    | Target |
-|----------|----------------------------------|---------|--------|
-| @version | 0.0.0                            | String  | both   |
-| @handle  | Base file name without extension | String  | both   |
-| @deps    | Empty                            | Array   | both   |
-| @footer  | True                             | Boolean | js     |
-| @media   | all                              | String  | css    |
+| Name      | Default                              | type    | Target | Possible Values |
+|-----------|--------------------------------------|---------|--------|-----------------|
+| @version  | 0.0.0                                | String  | both   | 1.0.0           |
+| @handle   | Base file name without extension     | String  | both   | my-script       |
+| @deps     | Empty                                | Array   | both   | [jquery, my-js] |
+| @footer   | True                                 | Boolean | js     | true or false   |
+| @strategy | Empty                                | String  | css    | defer,async     |
+| @media    | all                                  | String  | css    | screen, print   |
+| @cssmedia | Same as `@media`. Avoid media query. | String  | css    | screen, print   |
 
-## Installation
+> [!TIP]
+> 1. All file will have `hash` property. This is md5 hash of file content and is useful and handy for `version` argument of `wp_register_(script|style)`.
+> 2. If your CSS includes media query and grab-deps parsed it unintentionally, you can use `@cssmedia` to avoid it.
 
-```bash
-npm install @kunoichi/grab-deps
-```
-
-## Usage
-
-Suppose that the directory structure of your theme/plugin is like below:
-
-```
-assets
-- js
-  - main.js
-- css
-  - style.css
-```
-
-And run this in your [npm scripts](https://docs.npmjs.com/misc/scripts) or [gulpfile.js](https://gulpjs.com/).
-
-```js
-// Import function.
-const { dumpSetting } = require('@kunoichi/grab-deps');
-// Dump JSON
-dumpSetting( 'assets' );
-```
-
-For automatic dumping, watch assets directory.
-
-```js
-// gulpfile.js
-const gulp = require( 'gulp' );
-const { dumpSetting } = require('@kunoichi/grab-deps');
-
-// Dump task.
-gulp.task( 'dump', function( done ) {
-	dumpSetting( 'assets' );
-	done();
-} );
-
-// Watch assets directory.
-gulp.task( 'watch', function () {
-	// Watch assets change and dump.
-	gulp.watch( [ 'assets/**/*.css', 'assets/**/*.js' ], gulp.task( 'dump' ) );
-} );
-```
-
-Now you can get updated dump information whatever changes you made for assets.
 
 ### JSON Example
 
 ```json
 [
-  {
-    "path": "assets/js/app.js",
-    "deps": [ "jquery", "wp-api-fetch" ],
-  }
+	{
+		"path": "assets/js/app.js",
+		"version": "0.0.0",
+		"deps": [
+			"jquery",
+			"wp-api-fetch"
+		],
+		"hash": "900150983cd24fb0d6963f7d28e17f72",
+		"strategy": "defer",
+		"footer": true,
+		"handle": "my-app"
+	},
+	{
+		"path": "assets/css/style.css",
+		"version": "0.0.0",
+		"deps": [ "bootstrap" ],
+		"hash": "900150983cd24fb0d6963f7d28e17f72",
+		"media": "screen",
+		"handle": "my-style"
+	}
 ]
 ```
 
 ### License text
 
-Nowadays, some compilers like [webpack](https://webpack.js.org/plugins/terser-webpack-plugin/) extract license comments. If original is like below:
+Nowadays, some compilers/transpilers like [webpack](https://webpack.js.org/plugins/terser-webpack-plugin/) extract license comments. If original is like below:
 
-```
+```js
 /*!
  * Main app file.js
- * 
+ *
  * @version 2.0.0
  */
 console.log( 'Start rendering!' );
 ```
 
 `file.js` will compiled like below:
 
-```
-console.log( 'Start rendering!' );
+```js
+console.log('Start rendering!');
 ```
 
 And in same directory, `file.js.LICENSE.txt` will be exported.
 
-```
+```js
 /*!
  * Main app file.js
- * 
+ *
  * @version 2.0.0
  */
 ```
 
-In such case, `@kunoichi/grab-deps` will support `.LISENCE.txt` format by default. 3rd arghment `suffix` of `dumpSetting` supports other format.
+In such case, `@kunoichi/grab-deps` will support `.LISENCE.txt` format by default. 3rd argument `suffix` of `dumpSetting` supports other format.
 
 ```js
 // If your JS license will be in `app.js.txt`,
 // You can set suffix.
-// `app.js` will be `app.js.txt`
 dumpSetting( 'assets', './wp-dependencies.json', '.txt' );
 // If your licenses will be other format, specify function.
 dumpSetting( 'assets', './wp-dependencies.json', function( path ) {
   // Convert path to your license.txt
   return licensePath;
 } );
 ```
+
+---
+
+<p style="text-align: center;">
+&copy; 2019 <a href="https://tarosky.co.jp">TAROSKY</a>
+</p>
diff --git a/bin/grab-deps.js b/bin/grab-deps.js
@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+const { dumpSetting, compileDirectory } = require( '../index.js' );
+
+const [ node, js, subcommand ] = process.argv;
+
+// Subcommands.
+switch ( subcommand ) {
+	case 'dump':
+		dir  = process.argv[ 3 ] || './src';
+		json = process.argv[ 4 ] || './wp-dependencies.json';
+		suffix = process.argv[ 5 ] || '';
+		version = process.argv[ 6 ] || '0.0.0';
+		console.log( `Scanning ${dir} and dumping ${json}` );
+		dumpSetting( dir, json, suffix, version );
+		break;
+	case 'js':
+		srcDir = process.argv[ 3 ] || './src/js';
+		destDir = process.argv[ 4 ] || './build/js';
+		extention = process.argv[ 5 ] || 'js,jsx';
+		extention = extention.split( ',' );
+		compileDirectory( srcDir, destDir, extention ).then( ( res ) => {
+			console.log( 'Compiled JavaScripts.' );
+		} ).catch( console.error );
+		break;
+	default:
+		console.error( 'No subcommand available: %s', subcommand );
+		break;
+}