Merge pull request #6 from sventschui/restructure

Align with @developit's next preact example

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.github/workflows/ci.yml

@@ -0,0 +1,19 @@
+name: CI
+
+on: push
+
+jobs:
+  build:
+    timeout-minutes: 5
+    runs-on: ubuntu-20.04
+    strategy:
+      matrix:
+        node: ['12', '13', '14']
+    name: Node ${{ matrix.node }}
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2-beta
+        with:
+          node-version: ${{ matrix.node }}
+      - run: yarn
+      - run: yarn --cwd packages/demo next build

.gitignore

@@ -1,4 +1,3 @@
 node_modules/
-demo/node_modules/
-!demo/node_modules/next-plugin-preact
-demo/.next/
+.next/
+dist/

package.json

@@ -1,61 +1,48 @@
 {
-  "name": "next-plugin-preact",
-  "version": "2.0.0",
-  "description": "Next.js plugin for preact X",
-  "main": "plugin.js",
+  "name": "next-plugin-preact-workspace",
+  "version": "0.0.0",
+  "main": "index.js",
   "repository": "https://github.com/sventschui/next-plugin-preact",
   "author": "Sven Tschui <[email protected]>",
   "license": "MIT",
-  "nextjs": {
-    "name": "preact",
-    "required-env": []
-  },
-  "files": [
-    "alias.js",
-    "cli.js",
-    "plugin.js",
-    "src"
+  "private": true,
+  "workspaces": [
+    "packages/*"
   ],
-  "bin": {
-    "next-preact": "./cli.js"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged *.js demo/*.js demo/pages/*.js"
-    }
-  },
   "devDependencies": {
-    "eslint": "^6.0.1",
-    "eslint-config-developit": "^1.1.1",
-    "eslint-plugin-compat": "2.7.0",
-    "eslint-plugin-mocha": "4.12.1",
+    "eslint": "^7.6.0",
+    "eslint-config-developit": "^1.2.0",
+    "eslint-config-prettier": "^6.11.0",
     "husky": "^4.2.5",
-    "karma": "^4.1.0",
-    "next": "^9.0.0",
-    "preact": "^10.0.0-beta.3 || ^10.0.0-rc.0 || ^10",
     "prettier": "^2.0.5",
     "pretty-quick": "^2.0.1"
   },
-  "dependencies": {
-    "module-alias": "^2.0.0",
-    "preact-render-to-string": "^5.0.0",
-    "preact-ssr-prepass": "^1.0.0"
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged packages/next-plugin-preact/*.js packages/demo/*.js packages/demo/pages/*.js && eslint packages/**/*.js"
+    }
   },
-  "peerDependencies": {
-    "preact": "^10.0.0-beta.3 || ^10.0.0-rc.0 || ^10"
+  "prettier": {
+    "singleQuote": true,
+    "trailingComma": "none",
+    "arrowParens": "avoid"
   },
   "eslintConfig": {
-    "extends": "developit",
+    "extends": [
+      "developit",
+      "prettier"
+    ],
+    "settings": {
+      "react": {
+        "pragma": "React",
+        "version": "16.13"
+      }
+    },
     "rules": {
-      "prefer-rest-params": 0,
-      "prefer-spread": 0,
-      "no-cond-assign": 0,
-      "react/jsx-no-bind": 0,
-      "react/prefer-stateless-function": 0,
-      "react/sort-comp": 0,
-      "jest/valid-expect": 0,
-      "jest/no-disabled-tests": 0,
-      "react/no-find-dom-node": 0
+      "indent": [
+        "warn",
+        2
+      ]
     }
   }
 }

demo/next.config.js → packages/demo/next.config.js

@@ -1,5 +1,5 @@
 // next.config.js
-const withPreact = require("../");
+const withPreact = require("next-plugin-preact");
 
 module.exports = withPreact({
   /* config options here */

packages/demo/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "next-plugin-preact-demo",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "next",
+    "prod": "next build && next start"
+  },
+  "dependencies": {
+    "next": "^9.5.1",
+    "next-plugin-preact": "^2.0.0",
+    "preact": "^10.4.6",
+    "preact-render-to-string": "^5.1.10",
+    "react": "npm:@preact/compat",
+    "react-dom": "npm:@preact/compat"
+  }
+}

packages/demo/pages/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+
+const L = dynamic(() => import('../lazy'));
+
+export default function App() {
+  return (
+    <div>
+      Hello world!
+      <L />
+    </div>
+  );
+}

packages/next-plugin-preact/esc.js

@@ -0,0 +1,4 @@
+module.exports =
+  process.stdout.hasColors && process.stdout.hasColors()
+    ? n => `\x1b[${n}`
+    : () => '';

packages/next-plugin-preact/index.js

@@ -0,0 +1,114 @@
+const { join } = require('path');
+const moduleAlias = require('module-alias');
+const esc = require('./esc');
+
+function npm(name) {
+  return name;
+}
+
+moduleAlias.addAliases({
+  react: npm('preact/compat'),
+  'react-dom': npm('preact/compat'),
+  'react-ssr-prepass': npm('preact-ssr-prepass'),
+  webpack: npm('webpack')
+});
+
+// this has to come after the webpack alias is set up:
+const withPrefresh = require('@prefresh/next');
+
+validateDependencies();
+
+module.exports = function withPreact(nextConfig = {}) {
+  return withPrefresh(
+    Object.assign({}, nextConfig, {
+      webpack(config, options) {
+        const { dev, isServer, defaultLoaders } = options;
+
+        if (!defaultLoaders) {
+          throw new Error(
+            'This plugin is not compatible with Next.js versions below 5.0.0 https://err.sh/next-plugins/upgrade'
+          );
+        }
+
+        // Move Preact into the framework chunk instead of duplicating in routes:
+        const splitChunks =
+          config.optimization && config.optimization.splitChunks;
+        if (splitChunks) {
+          const cacheGroups = splitChunks.cacheGroups;
+          const test = /[\\/]node_modules[\\/](preact|preact-render-to-string|preact-context-provider)[\\/]/;
+          if (cacheGroups.framework) {
+            cacheGroups.preact = Object.assign({}, cacheGroups.framework, {
+              test
+            });
+            // if you want to merge the 2 small commons+framework chunks:
+            // cacheGroups.commons.name = 'framework';
+          }
+        }
+
+        // Install webpack aliases:
+        const aliases = config.resolve.alias || (config.resolve.alias = {});
+        aliases.react = aliases['react-dom'] = 'preact/compat';
+        aliases['react-ssr-prepass'] = 'preact-ssr-prepass';
+
+        // Automatically inject Preact DevTools:
+        if (dev && !isServer) {
+          const entry = config.entry;
+          config.entry = function () {
+            return entry().then(function (entries) {
+              entries['main.js'] = ['preact/debug'].concat(
+                entries['main.js'] || []
+              );
+              return entries;
+            });
+          };
+        }
+
+        if (typeof nextConfig.webpack === 'function') {
+          config = nextConfig.webpack(config, options);
+        }
+
+        return config;
+      }
+    })
+  );
+};
+
+function validateDependencies() {
+  const toInstall = [];
+
+  for (const dep of ['preact', 'preact-render-to-string']) {
+    try {
+      require.resolve(dep);
+    } catch (e) {
+      toInstall.push(dep);
+    }
+  }
+
+  const NON_ALIAS_VERSION_REGEX = /^[\^~<>=\d]/;
+  const pkg = require(join(process.cwd(), 'package.json'));
+  const deps = pkg.dependencies;
+  if (!deps || !deps.react || NON_ALIAS_VERSION_REGEX.test(deps.react)) {
+    toInstall.push('react@npm:@preact/compat');
+  }
+  if (
+    !deps ||
+    !deps['react-dom'] ||
+    NON_ALIAS_VERSION_REGEX.test(deps['react-dom'])
+  ) {
+    toInstall.push('react-dom@npm:@preact/compat');
+  }
+
+  if (toInstall.length) {
+    const lines = '-'.repeat(Math.max(process.stdout.columns - 1, 10));
+    console.error(`${lines}${esc('31;0m')}
+[preact] Missing/incorrect dependencies.
+Please run:
+  npm i ${toInstall.join(' ')}
+
+or:
+
+  yarn add ${toInstall.join(' ')}
+${lines}${esc('0m')}`);
+    process.exit(-1);
+  }
+}

packages/next-plugin-preact/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "next-plugin-preact",
+  "version": "2.0.0",
+  "description": "Preact plugin for Next.js",
+  "main": "index.js",
+  "repository": "sventschui/next-plugin-preact",
+  "author": "Sven Tschui <[email protected]>",
+  "license": "MIT",
+  "nextjs": {
+    "name": "preact",
+    "required-env": []
+  },
+  "scripts": {
+    "postinstall": "node ./postinstall.js"
+  },
+  "files": [
+    "esc.js",
+    "index.js",
+    "postinstall.js"
+  ],
+  "devDependencies": {},
+  "dependencies": {
+    "@prefresh/next": "^0.3.2",
+    "module-alias": "^2.0.0"
+  },
+  "peerDependencies": {
+    "preact": ">=10",
+    "preact-render-to-string": ">=5",
+    "preact-ssr-prepass": ">=1"
+  }
+}

packages/next-plugin-preact/postinstall.js

@@ -0,0 +1,18 @@
+const esc = require('./esc');
+const lines = `\n${'-'.repeat(Math.max(process.stdout.columns - 1, 10))}\n`;
+
+process.stdout.write(
+  `${esc('1A')}${esc('K')}${lines}
+${esc('35;1m')}[PREACT] Required manual step!${esc('0m')}
+
+${esc('36;1m')}Install the alias packages:
+${esc('0m')}
+
+  npm i --save react@npm:@preact/compat react-dom@npm:@preact/compat
+
+or:
+
+  yarn add react@npm:@preact/compat react-dom@npm:@preact/compat
+${lines}
+`
+);