newspack-scripts 1.0.2 → 1.3.0

package/README.md

@@ -10,3 +10,11 @@ Will run `jest` tests. Useful flags:
 
 - `--watch` to run in file watch mode,
 - `--coverage` to collect test coverage
+
+### build
+
+Will run `calypso-build`, creating optimised production builds.
+
+### start
+
+Will run `calypso-build` in watch mode. 

package/bin/newspack-scripts.js

@@ -4,7 +4,7 @@ const spawn = require("cross-spawn");
 
 const [scriptName, ...nodeArgs] = process.argv.slice(2);
 
-if (["test"].includes(scriptName)) {
+if (["test", "build", "start"].includes(scriptName)) {
   const result = spawn.sync(
     process.execPath,
     [require.resolve("../scripts/" + scriptName), ...nodeArgs],

package/config/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = api => {
+  api.cache(true);
+  return {
+    presets: [
+      "@automattic/calypso-build/babel/default",
+      "@automattic/calypso-build/babel/wordpress-element"
+    ]
+  };
+};

package/config/eslintrc.js

@@ -0,0 +1,32 @@
+module.exports = {
+  extends: [
+    "plugin:@wordpress/eslint-plugin/recommended",
+    "plugin:react/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+  ],
+  env: {
+    browser: true,
+    jest: true,
+  },
+  ignorePatterns: ["dist/", "node_modules/"],
+  parser: "@babel/eslint-parser",
+  rules: {
+    "no-console": "off",
+    camelcase: "off",
+    // Disallow importing or requiring packages that are not listed in package.json
+    // This prevents us from depending on transitive dependencies, which could break in unexpected ways.
+    "import/no-extraneous-dependencies": ["error", { packageDir: "." }],
+    // There's a conflict with prettier here:
+    "react/jsx-curly-spacing": "off",
+    // Skip prop types validation for now
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/self-closing-comp": "error",
+    // JSDoc rules overrides
+    "jsdoc/require-returns": "off",
+    "jsdoc/require-param": "off",
+    // Deprecated rules
+    "jsx-a11y/no-onchange": "off",
+  },
+};

package/config/getWebpackConfig.js

@@ -0,0 +1,27 @@
+const path = require("path");
+
+const getWebpackConfig = require("@automattic/calypso-build/webpack.config.js");
+
+module.exports = (...args) => {
+  const config = getWebpackConfig(...args);
+
+  const scssRuleIndex = config.module.rules.findIndex(rule =>
+    rule.test.toString().match(/\(sc\|sa\|c\)ss/)
+  );
+  if (scssRuleIndex !== -1) {
+    const scssRule = config.module.rules[scssRuleIndex];
+    const postCssLoaderIndex = scssRule.use.findIndex(
+      loader => loader.loader && loader.loader.indexOf("postcss") > 0
+    );
+    if (postCssLoaderIndex !== -1) {
+      const postCssLoader = scssRule.use[postCssLoaderIndex];
+      const postCssConfigPath = path.resolve(__dirname, "postcss.config.js");
+      // Replace calypso-build's PostCSS config with this project's one.
+      postCssLoader.options.postcssOptions.config = postCssConfigPath;
+      config.module.rules[scssRuleIndex].use[
+        postCssLoaderIndex
+      ] = postCssLoader;
+    }
+  }
+  return config;
+};

package/config/postcss.config.js

@@ -0,0 +1,6 @@
+const postcssFocusWithin = require("postcss-focus-within");
+const autoprefixer = require("autoprefixer");
+
+module.exports = {
+  plugins: [autoprefixer(), postcssFocusWithin()]
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "newspack-scripts",
-  "version": "1.0.2",
+  "version": "1.3.0",
   "description": "",
   "bin": {
     "newspack-scripts": "./bin/newspack-scripts.js"
@@ -8,12 +8,25 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@automattic/calypso-build": "^10.0.0",
+    "@babel/eslint-parser": "^7.16.3",
+    "@babel/preset-env": "^7.16.4",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^12.1.2",
+    "@wordpress/eslint-plugin": "^9.3.0",
+    "autoprefixer": "^10.4.0",
     "babel-jest": "^27.4.2",
     "cross-spawn": "^7.0.3",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jest": "^25.3.0",
+    "eslint-plugin-react": "^7.27.1",
     "jest": "^27.4.3",
-    "jest-environment-jsdom": "^27.4.3"
+    "jest-environment-jsdom": "^27.4.3",
+    "postcss": "^8.4.4",
+    "postcss-focus-within": "^5.0.1",
+    "webpack": "^5.65.0"
   },
   "scripts": {
     "semantic-release": "semantic-release"

package/scripts/build.js

@@ -0,0 +1,10 @@
+"use strict";
+
+const spawn = require("cross-spawn");
+const modules = require("./utils/modules");
+
+spawn.sync(process.execPath, [modules.calypsoBuild], {
+  cwd: modules.rootDirectory,
+  stdio: "inherit",
+  env: { ...process.env, NODE_ENV: "production" }
+});

package/scripts/start.js

@@ -0,0 +1,10 @@
+"use strict";
+
+const spawn = require("cross-spawn");
+const modules = require("./utils/modules");
+
+spawn.sync(process.execPath, [modules.calypsoBuild, "--watch"], {
+  cwd: modules.rootDirectory,
+  stdio: "inherit",
+  env: { ...process.env, NODE_ENV: "development" }
+});

package/scripts/test.js

@@ -4,24 +4,22 @@ process.env.BABEL_ENV = "test";
 process.env.NODE_ENV = "test";
 
 const jest = require("jest");
-const fs = require("fs");
 const path = require("path");
-const execSync = require("child_process").execSync;
 
-let argv = process.argv.slice(2);
+const modules = require("./utils/modules");
 
-const appDirectory = fs.realpathSync(process.cwd());
+let argv = process.argv.slice(2);
 
 const JEST_CONFIG = {
-  rootDir: path.resolve(appDirectory),
-  setupFilesAfterEnv: [path.resolve(__dirname, "utils/jest-setup.js")],
+  rootDir: modules.rootDirectory,
+  setupFilesAfterEnv: [path.resolve(__dirname, "utils/jestSetup.js")],
   testMatch: ["<rootDir>/**/*test.js?(x)"],
   transform: {
-    "^.+\\.js?$": "babel-jest"
+    "^.+\\.js?$": path.resolve(__dirname, "utils/babelJestTransformer.js")
   },
   transformIgnorePatterns: ["/node_modules/(?!newspack-scripts/)"],
   moduleNameMapper: {
-    "\\.(scss|css)$": "babel-jest"
+    "\\.(scss|css)$": path.resolve(__dirname, "utils/babelJestTransformer.js")
   },
   testEnvironment: "jsdom",
   collectCoverageFrom: [

package/scripts/utils/babelJestTransformer.js

@@ -0,0 +1,13 @@
+"use strict";
+
+const babelJest = require("babel-jest").default;
+
+module.exports = babelJest.createTransformer({
+  presets: [
+    require.resolve("@babel/preset-env"),
+    require.resolve("@automattic/calypso-build/babel/default"),
+    require.resolve("@automattic/calypso-build/babel/wordpress-element")
+  ],
+  babelrc: false,
+  configFile: false
+});

package/scripts/utils/modules.js

@@ -0,0 +1,7 @@
+const fs = require("fs");
+const path = require("path");
+
+module.exports = {
+  rootDirectory: fs.realpathSync(process.cwd()),
+  calypsoBuild: require.resolve("@automattic/calypso-build/bin/calypso-build")
+};