@quintype/framework 7.0.1 → 7.0.2

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [7.0.2](https://github.com/quintype/quintype-node-framework/compare/v7.0.1...v7.0.2) (2022-01-05)
+
 ### [7.0.1](https://github.com/quintype/quintype-node-framework/compare/v6.3.0...v7.0.1) (2021-12-15)
 
 

package/docs-src/tutorials/migrate-from-v6-to-v7.md

@@ -0,0 +1,155 @@
+## Migrate from v6 to v7 of @quintype/framework
+
+In version 7 of @quintype/framework, we've bumped [webpack](https://www.npmjs.com/package/webpack) from version 4 to 5. Please refer webpack's official migration doc [here](https://webpack.js.org/migrate/5/)
+
+PR in malibu for reference > https://github.com/quintype/malibu-advanced/pull/332/files
+
+In your malibu app,
+
+- bump `"@quintype/framework": "^7.x.x"`
+- bump build `"@quintype/build": "^4.x.x",`
+- bump components (if applicable) `"@quintype/components": "^3.x.x"`
+- bump arrow (if applicable) `"@quintype/arrow": "^3.x.x"`
+- bump SEO `"@quintype/seo": "^1.39.x"`
+- update `react` and `react-dom` to latest minor version (16.14.0 at the time of writing)
+- update `react-redux` to latest minor version (7.2.5 at the time of writing)
+- you'll also need a library like [axios](https://www.npmjs.com/package/axios) or something similar to make api calls for HMR to work during development
+- Bump following dependancies (whichever are applicable):
+  - "lint-staged": "^11.2.3",
+    "nodemon": "^2.0.14",
+    "postcss": "^8.3.11",
+    "eslint": "^8.1.0",
+    "prettier": "2.4.1",
+    "react-test-renderer": "^17.0.2",
+    "stylelint": "^14.0.0",
+    "stylelint-config-recommended-scss": "^5.0.0",
+    "stylelint-scss": "^4.0.0",
+    "svg-sprite-loader": "^6.0.10",
+    "svg-transform-loader": "^2.0.13",
+    "webpack": "^5.59.1",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "4.9.1",
+    "webpack-dev-server": "^4.3.1",
+    "svgo-loader": "^3.0.0"
+- create a file called `nodemon.json`, add following to it
+  ```json
+  {
+    "verbose": true,
+    "delay": 2500
+  }
+  ```
+- in `app/server/helpers/index.js`, change
+
+  ```js
+  function getAsset(asset, qtAssetHelpers) {
+    const { assetPath, readAsset } = qtAssetHelpers;
+    return assetPath(asset) ? readAsset(asset) : "";
+  }
+  ```
+
+  to
+
+  ```js
+  async function getAsset(asset, qtAssetHelpers) {
+    const { assetPath, readAsset } = qtAssetHelpers;
+    const assetAbsolutePath = assetPath(asset);
+
+    if (process.env.NODE_ENV === "development") {
+      try {
+        // using axios here, can use any other package to make below call
+        const { data } = await axios.get(assetAbsolutePath);
+        return data;
+      } catch (error) {
+        console.warn("HMR chunk rendering failure");
+        console.warn(error);
+        return "";
+      }
+    }
+
+    return assetAbsolutePath ? readAsset(asset) : "";
+  }
+  ```
+
+- webpack has changed the API of `webpack.config.js` (check migration doc given above fore more info), so we gotta change the config accordingly. _Please note that your project might not need below change if you're not using SVG sprites. In that case please change the webpack config as per the new API_
+
+change what's applicable
+
+```js
+const webpackConfig = require("@quintype/build/config/webpack");
+const path = require("path");
+
+const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");
+const svgSprite = {
+  test: /\.svg$/,
+  loader: "svg-sprite-loader",
+  options: {
+    extract: true,
+    publicPath: "/",
+    symbolId: (filePath) => {
+      return path.basename(filePath).replace(".svg", "").toLowerCase();
+    },
+    spriteFilename: process.env.NODE_ENV === "production" ? "sprite-[hash].svg" : "sprite.svg",
+    esModule: false,
+  },
+};
+
+webpackConfig.module.rules.push(svgSprite);
+webpackConfig.module.rules.find((rule) => rule.loader === "file-loader").exclude = [
+  /app\/assets\/icons\/[a-z-]+\.svg$/,
+];
+
+const svgPlugin = () =>
+  new SpriteLoaderPlugin({
+    plainSprite: true,
+  });
+
+webpackConfig.plugins.push(svgPlugin());
+
+module.exports = {
+  ...webpackConfig,
+};
+```
+
+to
+
+```js
+const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");
+const path = require("path");
+const webpackConfig = require("@quintype/build/config/webpack");
+
+const { plugins, output, module: webpackModule } = webpackConfig;
+if (process.env.NODE_ENV !== "production") output.path = path.resolve("./public");
+const getSpritePlugin = () => new SpriteLoaderPlugin({ plainSprite: true });
+const insertIntoIndex = (arr, index, newItem) => [...arr.slice(0, index), newItem, ...arr.slice(index)];
+const enhancedPlugins = insertIntoIndex(plugins, 1, getSpritePlugin());
+const spriteRule = {
+  test: /\.svg$/,
+  use: [
+    {
+      loader: "svg-sprite-loader",
+      options: {
+        extract: true,
+        spriteFilename: process.env.NODE_ENV === "production" ? "svg-sprite-[hash].svg" : "svg-sprite.svg",
+        esModule: false,
+      },
+    },
+    "svg-transform-loader",
+    "svgo-loader",
+  ],
+};
+
+const enhancedRules = insertIntoIndex(webpackModule.rules, 5, spriteRule);
+enhancedRules[8] = {
+  test: /\.(jpe?g|gif|png|woff|woff2|eot|ttf|wav|mp3|ico|mp4)$/,
+  loader: "file-loader",
+  options: { context: "./app/assets", name: "[name].[ext]" },
+};
+
+module.exports = {
+  ...webpackConfig,
+  module: { ...webpackModule, ...{ rules: enhancedRules } },
+  plugins: enhancedPlugins,
+};
+```
+
+- please test thoroughly. Also webpack 5 shows warnings in browser, please resolve them if present

package/docs-src/tutorials/tutorials.json

@@ -0,0 +1,5 @@
+{
+  "migrate-from-v6-to-v7": {
+    "title": "Migrate from framework version 6 to 7"
+  }
+}

package/jsdoc.json

@@ -18,7 +18,7 @@
     "readme": "docs-src/home.md",
     "recurse": true,
     "verbose": true,
-    "tutorials": false,
+    "tutorials": "./docs-src/tutorials",
     "template": "./docs-src",
     "sitemapRoot": "https://developers.quintype.com/quintype-node-framework"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/framework",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "Libraries to help build Quintype Node.js apps",
   "main": "index.js",
   "scripts": {
@@ -27,7 +27,7 @@
   "homepage": "https://github.com/quintype/quintype-node-framework#readme",
   "dependencies": {
     "@ampproject/toolbox-optimizer": "2.8.3",
-    "@quintype/amp": "^2.4.17",
+    "@quintype/amp": "^2.4.18",
     "@quintype/backend": "^2.1.0",
     "@quintype/components": "^3.0.0",
     "@quintype/prerender-node": "^3.2.24",