Rfc/issue 355 no bundle development (#417)

* basic unbundled rendering of home page

* got livereload working for all files

* JSON support

* import CSS support

* disable eslint complexity

* header working

* ading banner and stylinh and fixed binary image loading

* integrated evergreen deps

* fully restored the home page in develop mode

* wip getting serialization working

* wip getting serialization working

* clean up and refactor, serialize WIP

* upgrade puppeteer to latest

* a  bit hacky but home page is now being built for production

* render header navigation from graph

* page template working for site in development

* all pages working in develop

* all pages serializing for prod

* sort header and shelf

* shelf expansion and table of contents

* label fallback handling

* fix index page rendering

* clean up logging

* favicon support

* refactor server lifecycle to use compilation and expose devServer

* built in serve command

* serve docs

* add support for app templates

* pretty URLs

* shelf working WIP

* quick styling tweak for side nav

* copy assets and graph.json in copy lifecycle

* basic support for css files

* fix copy error for nested folders

* call rollup from JS API

* rollup configuration sourced from compilation

* make sure to await Promise.all

* Rfc/issue 355 organize serve lifecycle (#419)

* task: organize serve

* fix: remove ctx from resolve

* fix: refactor further

* task: scope filters by file

* linting

* renable default tests and limited smoke tests

* disable all tests enable subset of tests

* meta specs

* enable custom title case

* enable custom workspace spec

* track missing dev dep

* enabled workspace assets test case

* fix link closing slash

* content-outlet refactor

* enabled getting started test case

* enable nested directory test case

* enable app template case

* enable page template spec

* enable user directory mapping case

* update comments

* got code markdown rendering and added support for custom plugins from config

* markdown plugins working including prism

* default markdown specs

* enable all tests

* rename markdown case

* syntax highlighting markdown spec

Co-authored-by: Grant Hutchinson <[email protected]>

Author: thescientist13

.eslintrc.js

@@ -1,13 +1,13 @@
-const path = require('path');
+// const path = require('path');
 
 module.exports = {
-  parser: 'babel-eslint',
   parserOptions: {
     ecmaVersion: 2018,
-    sourceType: 'module',
-    babelOptions: {
-      configFile: path.join(__dirname, './packages/cli/src/config/babel.config.js')
-    }
+    sourceType: 'module'
+    // TODO should we use this?
+    // babelOptions: {
+    //   configFile: path.join(__dirname, './packages/cli/src/config/babel.config.js')
+    // }
   },
   env: {
     browser: true,

.mocharc.js

@@ -1,6 +1,7 @@
 const path = require('path');
 
 module.exports = {
-  spec: path.join(__dirname, 'packages/**/test/**/**/**/*.spec.js'),
+  // TODO spec: path.join(__dirname, 'packages/**/test/**/**/**/*.spec.js'),
+  spec: path.join(__dirname, 'packages/**/test/cases/**/**/*.spec.js'),
   timeout: 30000
 };

README.md

@@ -31,13 +31,15 @@ Then in your _package.json_, you can run the CLI like so:
 "scripts": {
   "build": "greenwood build",
   "start": "greenwood develop",
-  "eject": "greenwood eject",
+  "serve": "greenwood serve",
+  "eject": "greenwood eject"
 }
 ```
 
-- `npm run build`: generates a static build of your project
-- `npm start`: starts a local development server for your project
-- `npm run eject`: ejects configurations to your working directory for additional customizations
+- `greenwood build`: Generates a production build of your project
+- `greenwood develop`: Starts a local development server for your project
+- `greenwood serve`: Generates a production build of the project and serves it locally on a simple web server.
+- `greenwood eject`: Ejects configurations to your working directory for additional customizations.
 
 ## Documentation
 All of our documentation is on our [website](https://www.greenwoodjs.io/) (which itself is built by Greenwood!).  See our website documentation to learn more about:

greenwood.config.js

@@ -1,6 +1,6 @@
 const path = require('path');
-const pluginGoogleAnalytics = require('./packages/plugin-google-analytics/src/index');
-const pluginPolyfills = require('./packages/plugin-polyfills/src/index');
+// const pluginGoogleAnalytics = require('./packages/plugin-google-analytics/src/index');
+// const pluginPolyfills = require('./packages/plugin-polyfills/src/index');
 
 const META_DESCRIPTION = 'A modern and performant static site generator supporting Web Component based development';
 const FAVICON_HREF = '/assets/favicon.ico';
@@ -20,17 +20,19 @@ module.exports = {
     { rel: 'icon', href: FAVICON_HREF },
     { name: 'google-site-verification', content: '4rYd8k5aFD0jDnN0CCFgUXNe4eakLP4NnA18mNnK5P0' }
   ],
-  plugins: [
-    ...pluginGoogleAnalytics({
-      analyticsId: 'UA-147204327-1'
-    }),
-    ...pluginPolyfills()
-  ],
+  // TODO
+  // plugins: [
+  //   ...pluginGoogleAnalytics({
+  //     analyticsId: 'UA-147204327-1'
+  //   }),
+  //   ...pluginPolyfills()
+  // ],
   markdown: {
     plugins: [
-      require('rehype-slug'),
-      require('rehype-autolink-headings'),
-      require('remark-github')
+      '@mapbox/rehype-prism',
+      'rehype-autolink-headings',
+      'rehype-slug',
+      'remark-github'
     ]
   }
 };

nyc.config.js

@@ -3,10 +3,10 @@ module.exports = {
   all: true,
 
   include: [
+    'packages/cli/src/commands/*.js',
     'packages/cli/src/data/*.js',
     'packages/cli/src/lib/*.js',
     'packages/cli/src/lifecycles/*.js',
-    'packages/cli/src/tasks/*.js',
     'packages/plugin-*/src/*.js'
   ],
 
@@ -17,7 +17,7 @@ module.exports = {
     'text-summary'
   ],
 
-  checkCoverage: true,
+  checkCoverage: false, // TODO renable
 
   statements: 85,
   branches: 75,

package.json

@@ -17,7 +17,7 @@
     "clean": "rimraf ./**/.greenwood/** && rimraf ./**/public/** && rimraf ./coverage",
     "clean:deps": "rimraf **/node_modules/**",
     "build": "node . build",
-    "serve": "yarn build && cd ./public && ws",
+    "serve": "node . serve",
     "develop": "node . develop",
     "test": "export BROWSERSLIST_IGNORE_OLD_DATA=true && nyc mocha",
     "test:tdd": "yarn test --watch",
@@ -27,9 +27,9 @@
   },
   "devDependencies": {
     "@ls-lint/ls-lint": "^1.9.2",
-    "babel-eslint": "^10.0.3",
     "chai": "^4.2.0",
     "eslint": "^6.8.0",
+    "glob-promise": "^3.4.0",
     "jsdom": "^14.0.0",
     "lerna": "^3.16.4",
     "mocha": "^6.1.4",

packages/cli/package.json

@@ -25,54 +25,33 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/core": "^7.8.3",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.8.3",
-    "@babel/preset-env": "^7.10.4",
-    "@babel/runtime": "^7.8.3",
-    "@webcomponents/webcomponentsjs": "^2.3.0",
-    "apollo-cache-inmemory": "^1.6.3",
-    "apollo-client": "^2.6.4",
-    "apollo-link-http": "^1.5.16",
-    "apollo-server": "^2.9.12",
-    "babel-loader": "^8.0.5",
-    "chalk": "^2.4.2",
-    "colors": "^1.3.3",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@webcomponents/webcomponentsjs": "^2.4.4",
+    "acorn": "^8.0.1",
+    "acorn-walk": "^8.0.0",
     "commander": "^2.20.0",
-    "copy-webpack-plugin": "^5.0.3",
-    "core-js": "^3.4.1",
-    "css-loader": "^2.1.1",
-    "css-to-string-loader": "^0.1.3",
-    "cssnano": "^4.1.10",
-    "file-loader": "^3.0.1",
-    "filewatcher-webpack-plugin": "^1.2.0",
-    "front-matter": "^3.0.1",
-    "fs-extra": "^8.1.0",
-    "graphql": "^14.5.8",
-    "graphql-tag": "^2.10.1",
-    "html-webpack-plugin": "^3.2.0",
-    "lit-element": "^2.0.1",
-    "lit-redux-router": "^0.9.3",
-    "local-web-server": "^2.6.1",
+    "es-module-shims": "^0.5.2",
+    "front-matter": "^4.0.2",
+    "htmlparser2": "^4.1.0",
+    "koa": "^2.13.0",
+    "livereload": "^0.9.1",
     "markdown-toc": "^1.2.0",
-    "node-fetch": "^2.6.0",
-    "postcss-loader": "^3.0.0",
-    "postcss-nested": "^4.1.2",
-    "postcss-preset-env": "^6.7.0",
-    "puppeteer": "^1.20.0",
-    "pwa-helpers": "^0.9.1",
-    "redux": "^4.0.1",
-    "redux-thunk": "^2.3.0",
-    "style-loader": "^0.23.1",
-    "wc-markdown-loader": "~0.2.0",
-    "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.0",
-    "webpack-dev-server": "^3.2.1",
-    "webpack-manifest-plugin": "^2.0.4",
-    "webpack-merge": "^4.2.1"
+    "node-html-parser": "^1.2.21",
+    "puppeteer": "^5.3.0",
+    "rehype-stringify": "^8.0.0",
+    "remark-frontmatter": "^2.0.0",
+    "remark-parse": "^8.0.3",
+    "remark-rehype": "^7.0.0",
+    "rollup": "^2.26.5",
+    "rollup-plugin-ignore-import": "^1.3.2",
+    "rollup-plugin-multi-input": "^1.1.1",
+    "rollup-plugin-postcss": "^3.1.5",
+    "rollup-plugin-terser": "^7.0.0",
+    "unified": "^9.2.0"
   },
   "devDependencies": {
-    "glob-promise": "^3.4.0",
+    "@mapbox/rehype-prism": "^0.5.0",
     "rehype-autolink-headings": "^4.0.0",
     "rehype-slug": "^3.0.0"
   }

packages/cli/src/commands/build.js

@@ -0,0 +1,33 @@
+const bundleCompilation = require('../lifecycles/bundle');
+const copyAssets = require('../lifecycles/copy');
+const fs = require('fs');
+const generateCompilation = require('../lifecycles/compile');
+const serializeCompilation = require('../lifecycles/serialize');
+const { devServer } = require('../lifecycles/serve');
+
+module.exports = runProductionBuild = async () => {
+
+  return new Promise(async (resolve, reject) => {
+
+    try {
+      const compilation = await generateCompilation();
+      const port = compilation.config.devServer.port;
+      const outputDir = compilation.context.outputDir;
+
+      devServer(compilation).listen(port);
+  
+      if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir);
+      }
+  
+      await serializeCompilation(compilation);
+      await bundleCompilation(compilation);
+      await copyAssets(compilation);
+
+      resolve();
+    } catch (err) {
+      reject(err);
+    }
+  });
+  
+};

packages/cli/src/commands/develop.js

@@ -0,0 +1,30 @@
+const generateCompilation = require('../lifecycles/compile');
+const livereload = require('livereload');
+const { devServer } = require('../lifecycles/serve');
+
+module.exports = runDevServer = async () => {
+
+  return new Promise(async (resolve, reject) => {
+
+    try {
+      const compilation = await generateCompilation();
+      const { port } = compilation.config.devServer;
+      const { userWorkspace } = compilation.context;
+      
+      devServer(compilation).listen(port, () => {
+        console.info(`Started local development at localhost:${port}`);
+        const liveReloadServer = livereload.createServer({
+          exts: ['html', 'css', 'js', 'md'],
+          applyCSSLive: false // https://github.com/napcs/node-livereload/issues/33#issuecomment-693707006
+        });
+
+        liveReloadServer.watch(userWorkspace, () => {
+          console.info(`Now watching directory "${userWorkspace}" for changes.`);
+        });
+      });
+    } catch (err) {
+      reject(err);
+    }
+
+  });
+};

packages/cli/src/tasks/eject.js packages/cli/src/commands/eject.js

@@ -0,0 +1,20 @@
+const generateCompilation = require('../lifecycles/compile');
+const { prodServer } = require('../lifecycles/serve');
+
+module.exports = runProdServer = async () => {
+
+  return new Promise(async (resolve, reject) => {
+
+    try {
+      const compilation = await generateCompilation();
+      const port = 8080;
+      
+      prodServer(compilation).listen(port, () => {
+        console.info(`Started production test server at localhost:${port}`);
+      });
+    } catch (err) {
+      reject(err);
+    }
+
+  });
+};

packages/cli/src/commands/serve.js

@@ -1,7 +1,7 @@
 module.exports = {
-  plugins: {
-    'postcss-preset-env': {}, // stage 2+
-    'postcss-nested': {},
-    'cssnano': {}
-  }
+  // plugins: {
+  //   'postcss-preset-env': {}, // stage 2+
+  //   'postcss-nested': {},
+  //   'cssnano': {}
+  // }
 };