Modernize dependencies and demo generation #35

domq · 2021-07-05T14:37:58Z

Modernize the big dependencies (Webpack, React, React Router, PostCSS instead of cssnext) as well as the smaller ones (lodash, node-libs-browser, basscss)
Simplify the development rig by running an independent (non-Webpack) Web server; as a result there is no need for an npm run copy step anymore
Figure out the “run React twice” trick used in the docs/ directory; document it; move it so that there is a lot less passing around of props required
Absorb react-hsl-sliders and static-site-generator-webpack-plugin for maintainability purposes

Functional React + ES6 sort of naturally want anonymous default exports a lot of the time

- Toolbar.jsx: whole file - Weed out commented-out code - Eliminate code that would only be reachable if the commented-out code was uncommented

- Use babel-loader rather than jsx-loader - Configure Babel for React (in package.json) - Work around some nonsense with `self` as per https://webpack.js.org/configuration/output/ - Make it work with modern Webpack, both in development mode (`yarn start`, `yarn webpack`) and in production mode (`yarn prod`) - Add a comment on why we use Webpack in the first place

- Use newest version - React.createClass → createReactClass, as per https://fr.reactjs.org/docs/react-without-es6.html - React.PropTypes → require('prop-types') - Kludge: inject React.createClass for the benefit of react-hsl-sliders

- Remove cssnext and replace with postcss-preset-env, as instructed by https://moox.io/blog/deprecating-cssnext - Integrate PostCSS with Webpack - To this end, add dependency `postcss-import` (to be very honest I have no idea what it does; however, things stop working if I remove it) - Put postcss config inside webpack.config.js (not in a separate file) - Remove “insert CSS here from data” construct; instead, use `mini-css-extract-plugin` to put the processed CSS in a file like they did in the 20th century - Structure the source thereof (`docs/styles.css`) the way the postcss pipeline expects: imports; then variable definitions (processed/eliminated with `postcss-css-variables`); then actual CSS stuff - Add `basscss-color-input-range` and `basscss-input-range` dependencies, which might have been overlooked upstream

- Free-form extract `AdditionalAssetsPlugin` from static-site-generator-webpack-plugin, abstracting and modernizing the code as we go - Let client code specify the desired additional assets as a callback (rather than having knowledge about the URL mapping ahead of time) - Bestow “second-stage rocket” capabilities to the plugin, i.e. make it so that said client code can call a method-ish that retrieves already webpack'd JS - Use Webpack API to emit the things that the aforementioned client code returns, as figured out from webpack/webpack#11425 - In order to avoid Webpack whining about `DeprecationWarning: Compilation.assets will be frozen in future`, use an [`additionalPass` hook](https://webpack.js.org/api/compiler-hooks/#additionalpass), rather than an emit hook - Document my journey

- Rewrite <Routes> into modern react-router: use a <Switch>; pay attention to priority orderings - Apply all the other changes recommended here and there on the Internet - Rewrite entry.js into entry.jsx - Plumb down props passing from generate-static-pages.js, including passing `location` to StaticRouter (so that the generated Web pages are now different from each other, as they should) - Refactor <Routes> and <Root> as function components - var → const

- Rewrite as a function component - Move <script> there (as opposed to old-school end-of-<body> location) - Fix path to bundle.js and CSS (use computed, relative path) - var → const

- Get rid of webpack-dev-server; replace with an `npm-run-all` of webpack+chokidar and a homemade server — Pros: no more reasoning about what's in memory or on disk; cons: no more page auto-reload on changes - Pretend we are on GitHub pages i.e. the docs homepage is at /colorable/, but the files are in the repository root (meaning, in particular, that there is no need for `npm run copy` anymore)

- The browser check was failing because `this` is actually empty in this particular case. Use a guarded access to `document` instead - `.render()` lives in `react-dom` these days - Modernize the outer React components: ES6, functions, const - Only let React-in-browser target a couple <div>s in the demo pages, thereby simplifying the data flow

This also causes that computation to happen in the browser.

[`react-hsl-sliders`](https://www.npmjs.com/package/react-hsl-sliders) was last published in 2015. - Copy its code into colorable - Drop the dependency - Translate into ES6 - Fix CSS classes for modern Basscss - Experimentation shows that one now needs both `input-range` and `range-light` classes for the sliders to be visible on-screen.

``` npm run prod ```

domq · 2021-07-05T14:44:25Z

Dear Brent, many thanks for your work on the Colorable NPM module, which we use as a kind of accessibility unit test in our higher education school’s visual identity (under § “Accessibility Table”).

I see that it has been a while since the last release at https://www.npmjs.com/package/colorable, and I found myself facing a bit of a situation as far as npm audit was concerned. In order to bring the security alert count down to 1 “moderate”, I found myself having to do pretty extensive rewrites. I believe I mostly succeeded, as you can see here:

However, I would understand if, given the amount of changes involved, you would be reluctant to take over maintainership of this. If that would be the case, would you please consider handing over maintainership on npmjs.com to me instead?

Thanks in advance, Dominique

Dominique Quatravaux added 16 commits July 3, 2021 14:03

[gitignore] Usual suspects

0a07284

[style] Give ourselves a pass over “no anonymous default export”

81ac99c

Functional React + ES6 sort of naturally want anonymous default exports a lot of the time

[deadcode] misc.

7df3e50

- Toolbar.jsx: whole file - Weed out commented-out code - Eliminate code that would only be reachable if the commented-out code was uncommented

[modernize] React

158645f

- Use newest version - React.createClass → createReactClass, as per https://fr.reactjs.org/docs/react-without-es6.html - React.PropTypes → require('prop-types') - Kludge: inject React.createClass for the benefit of react-hsl-sliders

[modernize] Misc. dependencies

7f5fd8b

[fix] <Head>

8a1eea1

- Rewrite as a function component - Move <script> there (as opposed to old-school end-of-<body> location) - Fix path to bundle.js and CSS (use computed, relative path) - var → const

[refactor] Move require('./data.js').colors near its sole use site

f6b31b1

This also causes that computation to happen in the browser.

[refactor] Twitter button script near Twitter button

6148067

[rebuild] Demos and assets

b700fe2

``` npm run prod ```

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Modernize dependencies and demo generation #35

Modernize dependencies and demo generation #35

domq commented Jul 5, 2021

domq commented Jul 5, 2021

Modernize dependencies and demo generation #35

Are you sure you want to change the base?

Modernize dependencies and demo generation #35

Conversation

domq commented Jul 5, 2021

domq commented Jul 5, 2021