@sumotto/configs 0.0.12 → 0.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/helpers/webpack.js +29 -12
  2. package/package.json +3 -7
  3. package/wp/webpack.blocks.config.js +120 -21
  4. package/wp/webpack.the-modifications.config.js +94 -0
  5. package/wp/webpack.theme.config.js +115 -95
package/helpers/webpack.js CHANGED
@@ -56,6 +56,32 @@ module.exports.Config = class {
56
56
  constructor( config, name, port = 'auto' ) {
57
57
  this.config = config;
58
58
  this.config.name = name;
59
+ this.entries = {};
60
+ this.entriesFunctions = [];
61
+
62
+ if ( typeof this.config.entry === 'function' ) {
63
+ this.entriesFunctions.push( this.config.entry );
64
+ } else {
65
+ this.entries = {
66
+ ...this.config.entry,
67
+ };
68
+ }
69
+
70
+ this.config.entry = () => {
71
+ let entries = {};
72
+
73
+ for ( const entriesFunction of this.entriesFunctions ) {
74
+ entries = {
75
+ ...entries,
76
+ ...entriesFunction(),
77
+ };
78
+ }
79
+
80
+ return {
81
+ ...this.entries,
82
+ ...entries,
83
+ };
84
+ };
59
85
 
60
86
  if ( config.devServer ) {
61
87
  // noinspection JSUnusedGlobalSymbols
@@ -90,23 +116,14 @@ module.exports.Config = class {
90
116
  }
91
117
 
92
118
  resetEntries() {
93
- this.config.entry = {};
119
+ this.entries = {};
120
+ this.entriesFunctions = [];
94
121
 
95
122
  return this;
96
123
  }
97
124
 
98
125
  addEntries( globPattern ) {
99
- if ( typeof this.config.entry === 'function' ) {
100
- this.config.entry = {
101
- ...this.config.entry(),
102
- ...getEntries( globPattern ),
103
- };
104
- } else {
105
- this.config.entry = {
106
- ...this.config.entry,
107
- ...getEntries( globPattern ),
108
- };
109
- }
126
+ this.entriesFunctions.push( () => getEntries( globPattern ) );
110
127
 
111
128
  return this;
112
129
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sumotto/configs",
3
- "version": "0.0.12",
3
+ "version": "0.0.14",
4
4
  "description": "Configs for my work",
5
5
  "scripts": {
6
6
  "release": "np --yolo"
@@ -26,17 +26,13 @@
26
26
  "wp/*"
27
27
  ],
28
28
  "dependencies": {
29
- "@wordpress/scripts": "^28.1.0",
30
- "clean-webpack-plugin": "^4.0.0",
29
+ "@wordpress/scripts": "^28.2.0",
31
30
  "copy-webpack-plugin": "^12.0.2",
32
31
  "dotenv": "^16.4.5",
32
+ "filemanager-webpack-plugin": "^8.0.0",
33
33
  "find-free-port-sync": "^1.0.0",
34
34
  "glob": "^10.4.2",
35
35
  "image-minimizer-webpack-plugin": "^4.0.2",
36
- "imagemin": "^9.0.0",
37
- "imagemin-gifsicle": "^7.0.0",
38
- "imagemin-jpegtran": "^7.0.0",
39
- "imagemin-optipng": "^8.0.0",
40
36
  "mini-css-extract-plugin": "^2.9.0",
41
37
  "rtlcss-webpack-plugin": "^4.0.7",
42
38
  "svgo": "^3.3.2",
package/wp/webpack.blocks.config.js CHANGED
@@ -1,8 +1,9 @@
1
1
  const MiniCSSExtractPlugin = require( 'mini-css-extract-plugin' );
2
2
  const RtlCssPlugin = require( 'rtlcss-webpack-plugin' );
3
- const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
4
3
  const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
4
+ const FileManagerPlugin = require( 'filemanager-webpack-plugin' );
5
5
  const findFreePort = require( 'find-free-port-sync' );
6
+ const { resolve } = require( 'node:path' );
6
7
  const {
7
8
  Config,
8
9
  defaultConfigWP,
@@ -28,28 +29,126 @@ const defaultConfig = new Config( defaultConfigWP, 'default', port )
28
29
  } )
29
30
  )
30
31
  .addPlugin(
31
- new CleanWebpackPlugin( {
32
- cleanOnceBeforeBuildPatterns: [
33
- '**/*',
34
- // Each link in the path has been added, because if this is not done,
35
- // the scripts will be separated since it does not fall under the condition !blocks/*/scripts/module.*,
36
- // and accordingly, the module files will be included with it...
37
- '!blocks',
38
- '!blocks/*',
39
- '!blocks/*/scripts',
40
- '!blocks/*/scripts/module.*',
41
- ],
42
- cleanStaleWebpackAssets: false,
43
- } ),
44
- 'before'
45
- )
46
- .addPlugin(
47
- // For styles remove JS and styles .asset.php
48
- new RemoveEmptyScriptsPlugin( {
49
- enabled: ! Config.hasDevServer( defaultConfigWP ),
32
+ new FileManagerPlugin( {
33
+ events: {
34
+ onStart: {
35
+ delete: [
36
+ {
37
+ source: './build/*',
38
+ options: {
39
+ ignore: '**/module.*',
40
+ },
41
+ },
42
+ ],
43
+ },
44
+ },
45
+ runOnceInWatchMode: true,
50
46
  } )
51
47
  );
52
48
 
53
- const modulesConfig = new Config( modulesConfigWP, 'modules' );
49
+ if ( ! Config.hasDevServer( defaultConfigWP ) ) {
50
+ defaultConfig.addPlugin(
51
+ // For styles remove JS and styles .asset.php
52
+ new RemoveEmptyScriptsPlugin()
53
+ );
54
+ } else {
55
+ defaultConfig.addWatch( 'src/blocks/*/scripts/module.{j,t}s' );
56
+ }
57
+
58
+ const modulesConfig = new Config( modulesConfigWP, 'modules' ).addPlugin(
59
+ new FileManagerPlugin( {
60
+ events: {
61
+ onStart: {
62
+ delete: [
63
+ {
64
+ source: '**/module.*',
65
+ options: {},
66
+ },
67
+ ],
68
+ },
69
+ },
70
+ runOnceInWatchMode: true,
71
+ } )
72
+ );
73
+
74
+ if ( process.env.WP_CONTENT_DIR ) {
75
+ defaultConfig
76
+ .addPlugin(
77
+ new FileManagerPlugin( {
78
+ events: {
79
+ onStart: {
80
+ delete: [
81
+ {
82
+ source: resolve(
83
+ process.env.WP_CONTENT_DIR,
84
+ 'plugins/theme-blocks'
85
+ ),
86
+ options: {
87
+ force: true,
88
+ },
89
+ },
90
+ ],
91
+ },
92
+ },
93
+ runOnceInWatchMode: true,
94
+ } )
95
+ )
96
+ .addPlugin(
97
+ new FileManagerPlugin( {
98
+ events: {
99
+ onEnd: {
100
+ copy: [
101
+ {
102
+ source: '**/*',
103
+ destination: resolve(
104
+ process.env.WP_CONTENT_DIR,
105
+ 'plugins/theme-blocks'
106
+ ),
107
+ },
108
+ ],
109
+ },
110
+ },
111
+ } )
112
+ );
113
+
114
+ modulesConfig
115
+ .addPlugin(
116
+ new FileManagerPlugin( {
117
+ events: {
118
+ onStart: {
119
+ delete: [
120
+ {
121
+ source: resolve(
122
+ process.env.WP_CONTENT_DIR,
123
+ 'plugins/theme-blocks'
124
+ ),
125
+ options: {
126
+ force: true,
127
+ },
128
+ },
129
+ ],
130
+ },
131
+ },
132
+ runOnceInWatchMode: true,
133
+ } )
134
+ )
135
+ .addPlugin(
136
+ new FileManagerPlugin( {
137
+ events: {
138
+ onEnd: {
139
+ copy: [
140
+ {
141
+ source: '**/*',
142
+ destination: resolve(
143
+ process.env.WP_CONTENT_DIR,
144
+ 'plugins/theme-blocks'
145
+ ),
146
+ },
147
+ ],
148
+ },
149
+ },
150
+ } )
151
+ );
152
+ }
54
153
 
55
154
  module.exports = [ defaultConfig.get(), modulesConfig.get() ];
package/wp/webpack.the-modifications.config.js ADDED
@@ -0,0 +1,94 @@
1
+ const RtlCssPlugin = require( 'rtlcss-webpack-plugin' );
2
+ const glob = require( 'glob' );
3
+ const path = require( 'path' );
4
+
5
+ require( 'dotenv' ).config( {
6
+ path: [
7
+ path.resolve( process.cwd(), '.env.local' ),
8
+ path.resolve( process.cwd(), '.env' ),
9
+ path.resolve( process.cwd(), '../.env.local' ),
10
+ path.resolve( process.cwd(), '../.env' ),
11
+ path.resolve( process.cwd(), '../../.env.local' ),
12
+ path.resolve( process.cwd(), '../../.env' ),
13
+ ],
14
+ } );
15
+
16
+ const [
17
+ defaultConfig,
18
+ modulesConfig,
19
+ ] = require( '@wordpress/scripts/config/webpack.config.js' );
20
+
21
+ function getEntryName( entryPath ) {
22
+ const entryData = path.parse( entryPath );
23
+ return path
24
+ .normalize(
25
+ path.join(
26
+ path.relative(
27
+ path.join( process.cwd(), 'src' ),
28
+ entryData.dir
29
+ ),
30
+ entryData.name
31
+ )
32
+ )
33
+ .replaceAll( '\\', '/' );
34
+ }
35
+
36
+ function getEntries( globPattern, replace = '' ) {
37
+ return glob
38
+ .sync( globPattern, {
39
+ absolute: true,
40
+ cwd: process.cwd(),
41
+ } )
42
+ .reduce( function ( entries, entryPath ) {
43
+ let name = getEntryName( entryPath ).replace( /^scripts\//, '' );
44
+ if ( replace ) {
45
+ name = name.replace( replace, '' );
46
+ }
47
+
48
+ entries[ name ] = entryPath;
49
+
50
+ return entries;
51
+ }, {} );
52
+ }
53
+
54
+ defaultConfig.entry = {
55
+ ...getEntries( 'src/*.{j,t}s{,x}' ),
56
+ };
57
+
58
+ defaultConfig.plugins.forEach( ( plugin, number ) => {
59
+ if ( plugin instanceof RtlCssPlugin ) {
60
+ defaultConfig.plugins.splice( number, 1 );
61
+ }
62
+ } );
63
+
64
+ modulesConfig.entry = {
65
+ ...getEntries( 'src/scripts/modules/*.{j,t}s', 'modules/' ),
66
+ };
67
+
68
+ defaultConfig.name = 'default';
69
+ modulesConfig.name = 'modules';
70
+
71
+ defaultConfig.output.path = path.resolve( __dirname, 'build/scripts' );
72
+ modulesConfig.output.path = path.resolve( __dirname, 'build/modules' );
73
+
74
+ const reactJSXRuntimeConfig = {
75
+ name: 'react',
76
+ entry: {
77
+ 'react-jsx-runtime': {
78
+ import: 'react/jsx-runtime',
79
+ },
80
+ },
81
+ output: {
82
+ path: path.resolve( __dirname, 'build/polyfill' ),
83
+ filename: 'react-jsx-runtime.js',
84
+ library: {
85
+ name: 'ReactJSXRuntime',
86
+ type: 'window',
87
+ },
88
+ },
89
+ externals: {
90
+ react: 'React',
91
+ },
92
+ };
93
+
94
+ module.exports = [ defaultConfig, modulesConfig, reactJSXRuntimeConfig ];
package/wp/webpack.theme.config.js CHANGED
@@ -1,8 +1,8 @@
1
- const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
2
1
  const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
3
2
  const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
4
3
  const RtlCssPlugin = require( 'rtlcss-webpack-plugin' );
5
4
  const ImageMinimizerPlugin = require( 'image-minimizer-webpack-plugin' );
5
+ const FileManagerPlugin = require( 'filemanager-webpack-plugin' );
6
6
  const { resolve } = require( 'node:path' );
7
7
  const findFreePort = require( 'find-free-port-sync' );
8
8
  const {
@@ -10,6 +10,7 @@ const {
10
10
  defaultConfigWP,
11
11
  modulesConfigWP,
12
12
  } = require( '../helpers/webpack' );
13
+ const root = process.cwd();
13
14
 
14
15
  const port =
15
16
  process.env.THEME_DEV_SERVER_PORT ||
@@ -20,10 +21,8 @@ const defaultConfig = new Config( defaultConfigWP, 'default', port )
20
21
  .addEntries(
21
22
  'src/styles/{*.{pc,sc,sa,c}ss,{blocks,variations,patterns}/**/*.{pc,sc,sa,c}ss}'
22
23
  )
23
- .addEntries( 'src/scripts/*.{j,t}s' )
24
24
  .changeRule( '/\\.(sc|sa)ss$/', ( rule ) => {
25
25
  const last = rule.use.length - 1;
26
- const root = process.cwd();
27
26
 
28
27
  rule.use[ last ].options.sassOptions = {
29
28
  includePaths: [ resolve( root, 'src/styles/partials' ) ],
@@ -31,19 +30,21 @@ const defaultConfig = new Config( defaultConfigWP, 'default', port )
31
30
  } )
32
31
  .removePlugin( RtlCssPlugin )
33
32
  .addPlugin(
34
- new CleanWebpackPlugin( {
35
- cleanOnceBeforeBuildPatterns: [
36
- '**/*',
37
- // Each link in the path has been added, because if this is not done,
38
- // the scripts will be separated since it does not fall under the condition !scripts/modules/*,
39
- // and accordingly, the module files will be included with it...
40
- '!scripts',
41
- '!scripts/modules',
42
- '!scripts/modules/*',
43
- ],
44
- cleanStaleWebpackAssets: false,
45
- } ),
46
- 'before'
33
+ new FileManagerPlugin( {
34
+ events: {
35
+ onStart: {
36
+ delete: [
37
+ {
38
+ source: './build/*',
39
+ options: {
40
+ ignore: './build/scripts/modules/**/*',
41
+ },
42
+ },
43
+ ],
44
+ },
45
+ },
46
+ runOnceInWatchMode: true,
47
+ } )
47
48
  )
48
49
  .addPlugin(
49
50
  // For styles remove JS and styles .asset.php
@@ -58,25 +59,21 @@ const defaultConfig = new Config( defaultConfigWP, 'default', port )
58
59
  from: 'src/fonts',
59
60
  to: 'fonts',
60
61
  noErrorOnMissing: true,
61
- globOptions: {
62
- ignore: [ '**/readme.md' ],
63
- },
62
+ },
63
+ {
64
+ from: 'src/images',
65
+ to: 'images',
66
+ noErrorOnMissing: true,
64
67
  },
65
68
  {
66
69
  from: 'src/social-icons',
67
70
  to: 'social-icons',
68
71
  noErrorOnMissing: true,
69
- globOptions: {
70
- ignore: [ '**/readme.md' ],
71
- },
72
72
  },
73
73
  {
74
74
  from: 'src/menu-icons',
75
75
  to: 'menu-icons',
76
76
  noErrorOnMissing: true,
77
- globOptions: {
78
- ignore: [ '**/readme.md' ],
79
- },
80
77
  },
81
78
  ],
82
79
  } )
@@ -92,6 +89,11 @@ const defaultConfig = new Config( defaultConfigWP, 'default', port )
92
89
  plugins: [
93
90
  {
94
91
  name: 'preset-default',
92
+ params: {
93
+ overrides: {
94
+ removeViewBox: false,
95
+ },
96
+ },
95
97
  },
96
98
  {
97
99
  name: 'addAttributesToSVGElement',
@@ -107,89 +109,107 @@ const defaultConfig = new Config( defaultConfigWP, 'default', port )
107
109
  },
108
110
  },
109
111
  },
110
- {
111
- implementation: ImageMinimizerPlugin.imageminMinify,
112
- options: {
113
- plugins: [
114
- [ 'gifsicle' ],
115
- [ 'jpegtran', { progressive: true } ],
116
- [ 'optipng', { optimizationLevel: 5 } ],
117
- ],
118
- },
119
- },
120
112
  ],
121
113
  } )
122
- )
123
- .addWatch( 'src/scripts/modules/*' );
114
+ );
124
115
 
125
116
  const modulesConfig = new Config( modulesConfigWP, 'modules' )
126
117
  .resetEntries()
127
- .addEntries( 'src/scripts/modules/*.{j,t}s' );
128
-
129
- const patternsConfig = new Config(
130
- {
131
- entry: {},
132
- mode: 'production',
133
- output: { path: resolve( process.cwd(), 'patterns/images' ) },
134
- },
135
- 'patterns'
136
- )
118
+ .addEntries( 'src/scripts/modules/*.{j,t}s' )
137
119
  .addPlugin(
138
- new CopyWebpackPlugin( {
139
- patterns: [
140
- {
141
- from: 'src/images-for-patterns',
142
- to: './',
143
- noErrorOnMissing: true,
144
- globOptions: {
145
- ignore: [ '**/readme.md' ],
146
- },
120
+ new FileManagerPlugin( {
121
+ events: {
122
+ onStart: {
123
+ delete: [
124
+ {
125
+ source: './build/scripts/modules/*',
126
+ options: {},
127
+ },
128
+ ],
147
129
  },
148
- ],
130
+ },
131
+ runOnceInWatchMode: true,
149
132
  } )
150
- )
151
- .addMinimizer(
152
- new ImageMinimizerPlugin( {
153
- minimizer: [
154
- {
155
- implementation: ImageMinimizerPlugin.svgoMinify,
156
- options: {
157
- encodeOptions: {
158
- multipass: true,
159
- plugins: [
160
- {
161
- name: 'preset-default',
133
+ );
134
+
135
+ if ( process.env.WP_CONTENT_DIR ) {
136
+ defaultConfig
137
+ .addPlugin(
138
+ new FileManagerPlugin( {
139
+ events: {
140
+ onStart: {
141
+ delete: [
142
+ {
143
+ source: resolve(
144
+ process.env.WP_CONTENT_DIR,
145
+ 'themes/theme-child'
146
+ ),
147
+ options: {
148
+ force: true,
162
149
  },
163
- {
164
- name: 'addAttributesToSVGElement',
165
- params: {
166
- attributes: [
167
- {
168
- 'aria-hidden': 'true',
169
- },
170
- ],
171
- },
150
+ },
151
+ ],
152
+ },
153
+ },
154
+ runOnceInWatchMode: true,
155
+ } )
156
+ )
157
+ .addPlugin(
158
+ new FileManagerPlugin( {
159
+ events: {
160
+ onEnd: {
161
+ copy: [
162
+ {
163
+ source: '**/*',
164
+ destination: resolve(
165
+ process.env.WP_CONTENT_DIR,
166
+ 'themes/theme-child'
167
+ ),
168
+ },
169
+ ],
170
+ },
171
+ },
172
+ } )
173
+ );
174
+
175
+ modulesConfig
176
+ .addPlugin(
177
+ new FileManagerPlugin( {
178
+ events: {
179
+ onStart: {
180
+ delete: [
181
+ {
182
+ source: resolve(
183
+ process.env.WP_CONTENT_DIR,
184
+ 'themes/theme-child'
185
+ ),
186
+ options: {
187
+ force: true,
172
188
  },
173
- ],
174
- },
189
+ },
190
+ ],
175
191
  },
176
192
  },
177
- {
178
- implementation: ImageMinimizerPlugin.imageminMinify,
179
- options: {
180
- plugins: [
181
- [ 'gifsicle', { interlaced: true } ],
182
- [ 'jpegtran', { progressive: true } ],
183
- [ 'optipng', { optimizationLevel: 5 } ],
193
+ runOnceInWatchMode: true,
194
+ } )
195
+ )
196
+ .addPlugin(
197
+ new FileManagerPlugin( {
198
+ events: {
199
+ onEnd: {
200
+ copy: [
201
+ {
202
+ source: '**/*',
203
+ destination: resolve(
204
+ process.env.WP_CONTENT_DIR,
205
+ 'themes/theme-child'
206
+ ),
207
+ },
184
208
  ],
185
209
  },
186
210
  },
187
- ],
188
- } )
189
- );
211
+ } )
212
+ );
213
+ }
190
214
 
191
- module.exports = [
192
- defaultConfig.get(),
193
- modulesConfig.get(),
194
- patternsConfig.get(),
195
- ];
215
+ module.exports = [ defaultConfig.get(), modulesConfig.get() ];