Merge pull request #63 from 10up/fix/webpack-asset-modules

Fix regex in asset/resources'
10up · May 22, 2021 · ad7c717 · ad7c717
2 parents 586fb61 + 2e6031a
commit ad7c717
Show file tree

Hide file tree

Showing 12 changed files with 145 additions and 36 deletions.
diff --git a/.github/workflows/build-test-projects.yml b/.github/workflows/build-test-projects.yml
@@ -0,0 +1,36 @@
+name: projects builds
+
+on: [pull_request]
+
+jobs:
+  unit-tests:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x, 14.x, 15.x]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+
+      - name: Setup Node ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Setup npm cache
+        uses: actions/cache@v1
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - name: Install dependencies
+        run: npm install --legacy-peer-deps
+      - name: build library
+        run: (cd projects/library && npm run build)
+      - name: build ts library
+        run: (cd projects/library-ts && npm run build)
+      - name: build 10up theme
+        run: (cd projects/10up-theme && npm run build)
diff --git a/packages/toolkit/config/__tests__/__snapshots__/webpack.config.js.snap b/packages/toolkit/config/__tests__/__snapshots__/webpack.config.js.snap
@@ -21,10 +21,26 @@ Object {
     },
   },
   "externals": Object {
-    "lodash": "lodash",
-    "read-pkg": "read-pkg",
-    "read-pkg-up": "read-pkg-up",
-    "resolve-bin": "resolve-bin",
+    "lodash": Object {
+      "amd": "lodash",
+      "commonjs": "lodash",
+      "commonjs2": "lodash",
+    },
+    "read-pkg": Object {
+      "amd": "read-pkg",
+      "commonjs": "read-pkg",
+      "commonjs2": "read-pkg",
+    },
+    "read-pkg-up": Object {
+      "amd": "read-pkg-up",
+      "commonjs": "read-pkg-up",
+      "commonjs2": "read-pkg-up",
+    },
+    "resolve-bin": Object {
+      "amd": "resolve-bin",
+      "commonjs": "resolve-bin",
+      "commonjs2": "resolve-bin",
+    },
   },
   "mode": "development",
   "module": Object {
@@ -99,7 +115,7 @@ Object {
         ],
       },
       Object {
-        "test": /\\\\\\.\\{jpg,jpeg,png,gif,svg,eot,ttf,woff,woff2\\}/,
+        "test": /\\\\\\.\\(woff\\(2\\)\\?\\|ttf\\|eot\\|svg\\|jpg\\|jpeg\\|png\\|giff\\|webp\\)\\(\\\\\\?v=\\\\d\\+\\\\\\.\\\\d\\+\\\\\\.\\\\d\\+\\)\\?\\$/,
         "type": "asset/resource",
       },
     ],
@@ -315,9 +331,21 @@ Object {
     },
   },
   "externals": Object {
-    "read-pkg": "read-pkg",
-    "read-pkg-up": "read-pkg-up",
-    "resolve-bin": "resolve-bin",
+    "read-pkg": Object {
+      "amd": "read-pkg",
+      "commonjs": "read-pkg",
+      "commonjs2": "read-pkg",
+    },
+    "read-pkg-up": Object {
+      "amd": "read-pkg-up",
+      "commonjs": "read-pkg-up",
+      "commonjs2": "read-pkg-up",
+    },
+    "resolve-bin": Object {
+      "amd": "resolve-bin",
+      "commonjs": "resolve-bin",
+      "commonjs2": "resolve-bin",
+    },
   },
   "mode": "development",
   "module": Object {
@@ -348,6 +376,7 @@ Object {
                   },
                 ],
               ],
+              "sourceType": "unambiguous",
             },
           },
         ],
@@ -413,7 +442,7 @@ Object {
         ],
       },
       Object {
-        "test": /\\\\\\.\\{jpg,jpeg,png,gif,svg,eot,ttf,woff,woff2\\}/,
+        "test": /\\\\\\.\\(woff\\(2\\)\\?\\|ttf\\|eot\\|svg\\|jpg\\|jpeg\\|png\\|giff\\|webp\\)\\(\\\\\\?v=\\\\d\\+\\\\\\.\\\\d\\+\\\\\\.\\\\d\\+\\)\\?\\$/,
         "type": "asset/resource",
       },
     ],
@@ -478,9 +507,21 @@ Object {
     },
   },
   "externals": Object {
-    "read-pkg": "read-pkg",
-    "read-pkg-up": "read-pkg-up",
-    "resolve-bin": "resolve-bin",
+    "read-pkg": Object {
+      "amd": "read-pkg",
+      "commonjs": "read-pkg",
+      "commonjs2": "read-pkg",
+    },
+    "read-pkg-up": Object {
+      "amd": "read-pkg-up",
+      "commonjs": "read-pkg-up",
+      "commonjs2": "read-pkg-up",
+    },
+    "resolve-bin": Object {
+      "amd": "resolve-bin",
+      "commonjs": "resolve-bin",
+      "commonjs2": "resolve-bin",
+    },
   },
   "mode": "development",
   "module": Object {
@@ -511,6 +552,7 @@ Object {
                   },
                 ],
               ],
+              "sourceType": "unambiguous",
             },
           },
         ],
@@ -576,7 +618,7 @@ Object {
         ],
       },
       Object {
-        "test": /\\\\\\.\\{jpg,jpeg,png,gif,svg,eot,ttf,woff,woff2\\}/,
+        "test": /\\\\\\.\\(woff\\(2\\)\\?\\|ttf\\|eot\\|svg\\|jpg\\|jpeg\\|png\\|giff\\|webp\\)\\(\\\\\\?v=\\\\d\\+\\\\\\.\\\\d\\+\\\\\\.\\\\d\\+\\)\\?\\$/,
         "type": "asset/resource",
       },
     ],
@@ -649,10 +691,26 @@ Object {
     },
   },
   "externals": Object {
-    "lodash": "lodash",
-    "read-pkg": "read-pkg",
-    "read-pkg-up": "read-pkg-up",
-    "resolve-bin": "resolve-bin",
+    "lodash": Object {
+      "amd": "lodash",
+      "commonjs": "lodash",
+      "commonjs2": "lodash",
+    },
+    "read-pkg": Object {
+      "amd": "read-pkg",
+      "commonjs": "read-pkg",
+      "commonjs2": "read-pkg",
+    },
+    "read-pkg-up": Object {
+      "amd": "read-pkg-up",
+      "commonjs": "read-pkg-up",
+      "commonjs2": "read-pkg-up",
+    },
+    "resolve-bin": Object {
+      "amd": "resolve-bin",
+      "commonjs": "resolve-bin",
+      "commonjs2": "resolve-bin",
+    },
   },
   "mode": "development",
   "module": Object {
@@ -683,6 +741,7 @@ Object {
                   },
                 ],
               ],
+              "sourceType": "unambiguous",
             },
           },
         ],
@@ -748,7 +807,7 @@ Object {
         ],
       },
       Object {
-        "test": /\\\\\\.\\{jpg,jpeg,png,gif,svg,eot,ttf,woff,woff2\\}/,
+        "test": /\\\\\\.\\(woff\\(2\\)\\?\\|ttf\\|eot\\|svg\\|jpg\\|jpeg\\|png\\|giff\\|webp\\)\\(\\\\\\?v=\\\\d\\+\\\\\\.\\\\d\\+\\\\\\.\\\\d\\+\\)\\?\\$/,
         "type": "asset/resource",
       },
     ],
@@ -841,6 +900,7 @@ Object {
                   },
                 ],
               ],
+              "sourceType": "unambiguous",
             },
           },
         ],

diff --git a/packages/toolkit/config/webpack/externals.js b/packages/toolkit/config/webpack/externals.js
@@ -1,7 +1,7 @@
 module.exports = ({ isPackage, packageConfig: { externals } }) => {
 	if (isPackage) {
 		return externals.reduce((acc, current) => {
-			acc[current] = current;
+			acc[current] = { commonjs: current, commonjs2: current, amd: current };
 			return acc;
 		}, {});
 	}

diff --git a/packages/toolkit/config/webpack/modules.js b/packages/toolkit/config/webpack/modules.js
@@ -56,6 +56,7 @@ module.exports = ({
 							...(!hasBabelConfig() && {
 								babelrc: false,
 								configFile: false,
+								sourceType: 'unambiguous',
 								presets: [
 									[
 										require.resolve('@10up/babel-preset-default'),
@@ -96,7 +97,7 @@ module.exports = ({
 			},
 			// when in package module only include referenced resources
 			isPackage && {
-				test: /\.{jpg,jpeg,png,gif,svg,eot,ttf,woff,woff2}/,
+				test: /\.(woff(2)?|ttf|eot|svg|jpg|jpeg|png|giff|webp)(\?v=\d+\.\d+\.\d+)?$/,
 				type: 'asset/resource',
 			},
 		].filter(Boolean),

diff --git a/packages/toolkit/utils/config.js b/packages/toolkit/utils/config.js
@@ -101,11 +101,13 @@ function getJestOverrideConfigFile(suffix) {
 const hasEslintignoreConfig = () => hasProjectFile('.eslintignore');
 
 const getDefaultConfig = () => {
+	const wpMode = getArgFromCLI('--wp');
+
 	return {
 		entry: require(fromConfigRoot('buildfiles.config.js')),
 		filenames: require(fromConfigRoot('filenames.config.js')),
 		paths: require(fromConfigRoot('paths.config.js')),
-		wordpress: true,
+		wordpress: wpMode !== 'false',
 		// true by default (if TENUP_NO_EXTERNALS is not set)
 		// if TENUP_NO_EXTERNALS is truthy then dependecyExternals is false
 		wpDependencyExternals:

diff --git a/projects/10up-theme/assets/js/frontend/frontend.ts b/projects/10up-theme/assets/js/frontend/frontend.ts
@@ -1,7 +1,7 @@
-// import foo from './components/bar';
-
 function helloTypeScript(name: string) {
 	return `Hello ${name}, this is TypeScript!`;
 }
 
 document.write(helloTypeScript('10up'));
+
+
diff --git a/projects/10up-theme/assets/js/shared/shared.js b/projects/10up-theme/assets/js/shared/shared.js
@@ -1 +1,3 @@
-// import foo from './bar'
+import Accordion from '@10up/component-accordion';
+
+new Accordion('.test', {});
diff --git a/projects/10up-theme/package.json b/projects/10up-theme/package.json
@@ -18,7 +18,8 @@
   },
   "dependencies": {
     "normalize.css": "^8.0.1",
-    "prop-types": "^15.7.2"
+    "prop-types": "^15.7.2",
+    "@10up/component-accordion": "2.0.1"
   },
   "@10up/scripts": {
     "devURL": "https://my-project.test",

diff --git a/projects/library/package.json b/projects/library/package.json
@@ -4,24 +4,15 @@
   "author": "10up",
   "description": "Accessible accordion component.",
   "main": "dist/index.js",
-  "exports": "./dist/index.modern.js",
   "umd:main": "dist/index.umd.js",
-  "module": "dist/index.module.js",
   "source": "src/index.js",
   "style": "./dist/index.css",
-  "types": "./index.d.ts",
   "scripts": {
     "watch": "concurrently \"npm run build:modern -- --watch\" \"npm run build:umd -- --watch\"",
     "build": "npm run build:modern && npm run build:umd",
-    "build:modern": "10up-toolkit build -f=commonjs",
+    "build:modern": "10up-toolkit build -f=commonjs --wp=false",
     "build:umd": "10up-toolkit build -f=umd -i=src/index.umd.js --name=TenUpAccordion --external=none"
   },
-  "browserslist": [
-    "> 1%",
-    "ie >= 11",
-    "last 2 versions",
-    "Firefox ESR"
-  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/10up/component-accordion.git"
@@ -39,7 +30,7 @@
     "10up-toolkit": "1.0.4",
     "concurrently": "^5.3.0"
   },
-  "@10up/scripts": {
+  "10up-toolkit": {
     "libraryName": "TenUpAccordion"
   }
 }
diff --git a/projects/library/src/assets/fonts/MrGeorge.ttf b/projects/library/src/assets/fonts/MrGeorge.ttf
diff --git a/projects/library/src/assets/fonts/MrGeorgeHeavy.ttf b/projects/library/src/assets/fonts/MrGeorgeHeavy.ttf
diff --git a/projects/library/src/style.css b/projects/library/src/style.css
@@ -1,5 +1,21 @@
 @import url('assets/core.css');
 
+:root {
+    --primary-font: 'Mr George', Arial, Helvetica, sans-serif;
+}
+
+@font-face {
+    font-family: 'Mr George';
+    src: url('./assets/fonts/MrGeorgeHeavy.ttf') format('truetype');
+    font-weight: 900
+}
+
+@font-face {
+    font-family: 'Mr George';
+    src: url('./assets/fonts/MrGeorge.ttf') format('truetype');
+    font-weight: 400
+}
+
 .accordion-header {
   border-bottom: 1px solid #303030;
   cursor: pointer;