@wordpress/scripts – Folders & Files

Last Updated on January 17, 2022 by Neil Murray

cf7skins-single – visual-data branch

Ejected CRA

  • build
  • dist ?
  • config
    • jest NOT USED
    • env.js
    • paths.js
    • polyfills.js
    • webpack.config.dev.js CUSTOM
    • webpack.config.prod.js CUSTOM
    • webpack.config.scripts.js CUSTOM
    • webpackDevServer.config.js
    • window.js KEEP ?
  • public
    • assets
    • vendor
    • index.html
    • script.js
    • style.css
  • scripts
    • build.js
    • start.js
    • test.js NOT USED
  • src
    • dev DELETE
    • visual
    • index.js
    • README.md
  • vendor
    • lodash.min.js
    • react.production.min.js
    • react-dom.production.min.js
    • README.md
  • .babelrc
  • .gitignore
  • buildPlugin.js
  • buildTranslation.js
  • index.html
  • index.php
  • package.json
  • package-lock.json
  • README.md
  • webpack.config.js

@wordpress/scripts

  • build
  • config
    • window.js ?
  • public IMPORTANT
    • assets
    • vendor
    • index.html
    • script.js – our custom npm start code
    • style.css – our custom npm start css
  • scripts DELETE ?
  • src
    • cf7skins NEW
    • visual
    • index.js
    • README.md
  • vendor ?
    • lodash.min.js
    • react.production.min.js
    • react-dom.production.min.js
    • @wordpress/data ?
    • @wordpress/i18n
    • README.md
  • .babelrc
  • .gitignore
  • buildPlugin.js
  • buildTranslation.js
  • index.html
  • index.php
  • package.json
  • package-lock.json ?
  • README.md
  • webpack.config.js

@wordpress/scripts – mock files

package.json #

{
"name": "cf7skins-visual",
"version": "2.5.1",
"description": "CF7 Skins Visual Editor",
"license": "GPL-2.0",
},
"main": "src/index.js",
"dependencies": {
    "@wordpress/data": "^4.25.0",
    "@wordpress/i18n": "^3.3.0",
    "lodash": "^4.17.11",
    "rc-animate": "^2.6.0",
    "rc-menu": "^6.2.11",
    "react": "^16.8.5",
    "react-dnd": "^2.5.3",
    "react-dnd-html5-backend": "^2.5.3",
    "react-dom": "^16.8.5",
    "react-select": "^1.3.0",
    "react-sortable-tree": "^1.4.0",
    "react-tooltip": "^3.11.2"
},
"devDependencies": {
    "@wordpress/scripts": "^12.3.0"
},
"scripts": {
    "develop": " ", START HERE
    "build": "wp-scripts build",
    "start": "wp-scripts start",
    "packages-update": "wp-scripts packages-update"
}

webpack.config.js #

From Docs

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
 
module.exports = {
    ...defaultConfig,
    module: {
        ...defaultConfig.module,
        rules: [
            ...defaultConfig.module.rules,
            {
                test: /.toml/,
                type: 'json',
                parser: {
                    parse: toml.parse,
                },
            },
        ],
    },
};

Mock 1

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

module.exports = {
	...defaultConfig,
	entry: { // DEFAULT
		index: path.resolve( process.cwd(), 'src', 'index.js' ),
	},
	output: { // DEFAULT
		filename: '[name].js',
		path: path.resolve( process.cwd(), 'build' ),
		// Prevents conflicts when multiple webpack runtimes (from different apps)
		// are used on the same page.
		// @see https://github.com/WordPress/gutenberg/issues/23607
		jsonpFunction: getJsonpFunctionIdentifier(),
	},
	module: {
		...defaultConfig.module,
		rules: [
			...defaultConfig.module.rules,
			{
			// ADD extra rules here
			},
		],
	},
	plugins: [
		...defaultConfig.plugins,
		{
		// ADD extra plugins here
		},
	],
};

Mock 2

const scriptsConfig = require( '@wordpress/scripts/config/webpack.config' );
const WebpackShellPlugin = require( 'webpack-shell-plugin' );
const merge = require( 'lodash' ).merge;

const baseConfig = {
	output: {
		filename: "dist/[name].js", // Is dist/ still used?
	},
	externals: {
		'@wordpress/data': '@wordpress/data', // @since 2.5
		'@wordpress/i18n': '@wordpress/i18n',
		'react': 'React',
		'react-dom': 'ReactDOM',
		'lodash': 'lodash',
	},
};

const wpConfig = { // @since 0.7.3
	entry: {
		'i18n': '@wordpress/i18n', // translations
		'data': '@wordpress/data', // @since 2.5
	},
	externals: {
		'react': 'React',
		'react-dom': 'ReactDOM',
		'lodash': 'lodash',
	},
	output: {
		filename: "dist/wp-[name].js", // prefixed with "wp-"
		// Expose library into cf7svisual variable
		// @link https://webpack.js.org/configuration/output/#output-library
		library: [ 'wp', '[name]' ], // make file available via it's entry name
		libraryTarget: 'this',
	},
};

const addonsConfig = {
	entry: {
		'addons': './src/visual/AddOns/addons.js',
		'util': './src/visual/util/api.js', // @since 0.6.8
	},
	output: {
		// Expose library into cf7svisual variable
		// @link https://webpack.js.org/configuration/output/#output-library
		library: [ 'cf7svisual', '[name]' ], // make file available via it's entry name
		// Target library to window
		// @link https://webpack.js.org/configuration/output/#output-libraryexport
		libraryTarget: 'window',
	},
};

const visualConfig = {
	entry: {
		'visual': './src/index.js',
		'ready'	: './src/visual/AddOns/Ready/index.js',
		'multi'	: './src/visual/AddOns/Multi/index.js',
		'pro'	: './src/visual/AddOns/Pro/index.js',
	},
};

const defaultConfig = {
		...scriptsConfig,
	entry: {
		...scriptsConfig.entry,
			// ADD extra items here
	},
	output: {
		...scriptsConfig.output,
			// ADD extra items here
	},
	module: {
		...scriptsConfig.module,
		rules: [
			...scriptsConfig.module.rules,
			{
			// ADD extra rules here
			},
		],
	},
	plugins: [
		...scriptsConfig.plugins,
		{
		new WebpackShellPlugin( // runs commands before & after webpack build
			{
				onBuildStart	: [ 'echo Creating webpack bundle then copy...' ],
				onBuildEnd		: [ 'node buildPlugin.js' ], // builds separate CF7 Skins plugins
			}
		),
		},
	],
};

/**
 * Build addons.js first, then visual.js + other Add-ons index.js, and run buildPlugin.js.
 * 
 */
module.exports = {
	defaultConfig,
	wpConfig, 
	merge( addonsConfig, baseConfig ), 
	merge( visualConfig, baseConfig ),
};

npm start #

index.html #

Current

<html>
	<head>
		<meta charset="utf-8">
		<title>CF7 Skins Visual Editor - RST Version</title>
		<link rel="stylesheet" href="%PUBLIC_URL%/style.css" />
		<link rel="stylesheet" href="%PUBLIC_URL%/assets/dashicons/dashicons.css" />
		<link rel="stylesheet" href="%PUBLIC_URL%/assets/typicons/typicons.min.css" />
		<link rel="stylesheet" href="%PUBLIC_URL%/assets/common.min.css" />
		<link rel="stylesheet" href="%PUBLIC_URL%/assets/forms.min.css" />
		<link rel="stylesheet" href="%PUBLIC_URL%/assets/buttons.min.css" />
		<style type="text/css">
			* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
			body { background-color: #000000; } /* mimic WP left black sidebar */
			body { margin: 0; }
			body { display: block; }
			@media screen 
			  and (min-device-width: 1200px) 
			  and (max-device-width: 1600px) 
			  and (-webkit-min-device-pixel-ratio: 1) {
			  body { display: block; padding-left: 183px; } 
			} /* match WP admin interface */
			ol, ul { padding: 0; }
			ul { list-style: none; }
			dd, li { margin-bottom: 6px; }
			#cf7s .dashicons { color: #777; height: 31px; line-height: 31px; }
			#cf7s .help { background-color: #d5d5d5; border-radius: 50%; color: #FFFFFF; display: inline-block; font-size: 12px; 
				height: 20px; line-height: 20px; margin-left: 5px; text-align: center;  width: 20px; }
			#tab-visual{ padding: 20px; background: #D3E398; border-right: 20px #F1F1F1 solid; border-left: 20px #F1F1F1 solid; }
			#tab-visual:before, #tab-visual:after { display: table; content: " "; }
			#tab-visual:after { clear: both; }
		</style>
	</head>
	<body class="wp-admin wp-core-ui admin-color-fresh">
		<div id="controls">
			<button id="show-name" onclick="showName()"> </button>
			<button onclick="insertTreeData()">Insert treeData</button>
			<button onclick="resetTreeData()">Reset treeData</button>
		</div>
		<div class="wrap">
			<div id="tab-visual"></div>
		</div>
		<script type="text/javascript" src="%PUBLIC_URL%/script.js"></script>
		<script type="text/javascript" src="%PUBLIC_URL%/vendor/react.production.min.js"></script>
		<script type="text/javascript" src="%PUBLIC_URL%/vendor/react-dom.production.min.js"></script>
		<script type="text/javascript" src="%PUBLIC_URL%/vendor/lodash.min.js"></script>
		<script type="text/javascript">
			if ( ! window.lodash ) {
				window.lodash = _.noConflict();
			}
		</script>
		<script type="text/javascript" src="%PUBLIC_URL%/vendor/wp-i18n.min.js"></script>
		<script type="text/javascript">
			// Update show name button text @since 0.6.3
			var showNameCookie = !! getCookie( 'cf7svisual.options.showName' ) ? true : false;
			document.getElementById("show-name").textContent = showNameCookie ? 'Hide name' : 'Show name';
			
			// Check if treeData cookie exists and add into window @since 0.6.3
			var itemsCookie = getCookie( 'cf7svisual.items' );
			var items = itemsCookie ? JSON.parse( getCookie( 'cf7svisual.items' ) ) : '';
			
			// WordPress automatically prints this variable as a localize script dependency for visual.js
			// We need to put this variable here for development purpose to try integrations, 
			// translations or create default visual items.			
			var cf7svisual = {
				"environment": "development",
				"ajaxurl": "\/wordpress\/wp-admin\/admin-ajax.php",
				"versions": { wp: "4.9.8", cf7: "5.0.1" }, // @since 0.6.9
				"nonce": "d90fc3c0ee",
				"environment": "development", // @since 0.6.8
				"save": "cf7skins_visual_save",
				"l10n":{
					"save": "Save",
					"done": "Done",
				},
				"options":{ // since 0.6.3
					"showName": showNameCookie,
					"showCopyPaste": true
				},
				"items": items,
				"integration":{
					"reCAPTCHA": true, // set to false disable
				},
			}
		</script>
	</body>	
</html>

Mock

<html>
	<head>
		<meta charset="utf-8">
		<title>CF7 Skins Visual Editor</title>
		<link rel="stylesheet" href="%PUBLIC_URL%/style.css" />
		/* NM - should include our custom npm start code */
		<link rel="stylesheet" href="%PUBLIC_URL%/assets/dashicons/dashicons.css" />
		<link rel="stylesheet" href="%PUBLIC_URL%/assets/typicons/typicons.min.css" />
		<link rel="stylesheet" href="%PUBLIC_URL%/assets/common.min.css" />
		<link rel="stylesheet" href="%PUBLIC_URL%/assets/forms.min.css" />
		<link rel="stylesheet" href="%PUBLIC_URL%/assets/buttons.min.css" />
	</head>
	<body class="wp-admin wp-core-ui admin-color-fresh">
		<div id="controls">
			<button id="show-name" onclick="showName()"> </button>
			<button onclick="insertTreeData()">Insert treeData</button>
			<button onclick="resetTreeData()">Reset treeData</button>
		</div>
		<div class="wrap">
			<div id="tab-visual"></div>
		</div>
		<script type="text/javascript" src="%PUBLIC_URL%/script.js"></script>
		/* NM - should include our custom npm start code */
		<script type="text/javascript" src="%PUBLIC_URL%/vendor/react.production.min.js"></script>
		<script type="text/javascript" src="%PUBLIC_URL%/vendor/react-dom.production.min.js"></script>
		<script type="text/javascript" src="%PUBLIC_URL%/vendor/lodash.min.js"></script>
		<script type="text/javascript">
			if ( ! window.lodash ) {
				window.lodash = _.noConflict();
			}
		</script>
		<script type="text/javascript" src="%PUBLIC_URL%/vendor/wp-i18n.min.js"></script>
	</body>	
</html>

webpack.config.js – npm start #

module.exports = {
  //...
const defaultConfig = {
	...scriptsConfig,
	mode,
	devtool: mode === 'production' ? false : 'cheap-module-source-map', // https://webpack.js.org/configuration/devtool/
};
  devServer: { // https://webpack.js.org/configuration/dev-server/
    contentBase: path.join(__dirname, 'public'),
    compress: true,
    port: 3000,
  },
};

Files & Folders used in ejected CRA

  • build [ ]
  • config [ ]
    • jest [ ]
    • env.js [ ]
    • paths.js [ ]
    • polyfills.js [ ]
    • webpack.config.dev.js [ ]
    • webpack.config.prod.js [ ]
    • webpack.config.scripts.js [ ]
    • webpackDevServer.config.js [ ]
    • window.js [ ]
  • public [ ]
    • assets [ ]
    • vendor [ ]
    • index.html [ ]
    • script.js [ ]
    • style.css [ ]
  • scripts [ ]
    • build.js [ ]
    • start.js [ ]
    • test.js [ ]
  • src [ ]
    • dev [ ]
    • visual [ ]
    • index.js [ ]
    • README.md [ ]
  • vendor [ ]
    • lodash.min.js [ ]
    • react.production.min.js [ ]
    • react-dom.production.min.js [ ]
    • README.md [ ]
  • .babelrc [ ]
  • .gitignore [ ]
  • buildPlugin.js [ ]
  • buildTranslation.js [ ]
  • index.html [ ]
  • index.php [ ]
  • package.json [ ]
  • package-lock.json  [ ]
  • README.md [ ]
  • webpack.config.js [ ]