Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Modernize dependencies and demo generation #35

Open
wants to merge 16 commits into
base: master
Choose a base branch
from
Open

Modernize dependencies and demo generation #35

wants to merge 16 commits into from

Commits on Jul 3, 2021

  1. [gitignore] Usual suspects

    Dominique Quatravaux committed Jul 3, 2021
    Configuration menu
    Copy the full SHA
    0a07284 View commit details
    Browse the repository at this point in the history

Commits on Jul 5, 2021

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

    Functional React + ES6 sort of naturally want anonymous default
exports a lot of the time
    Dominique Quatravaux committed Jul 5, 2021
    Configuration menu
    Copy the full SHA
    81ac99c View commit details
    Browse the repository at this point in the history

  2. [deadcode] misc. 

    - Toolbar.jsx: whole file
- Weed out commented-out code
- Eliminate code that would only be reachable if the commented-out code was uncommented
    Dominique Quatravaux committed Jul 5, 2021
    Configuration menu
    Copy the full SHA
    7df3e50 View commit details
    Browse the repository at this point in the history

  3. [modernize] Webpack (and Babel) 

    - 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
    Dominique Quatravaux committed Jul 5, 2021
    Configuration menu
    Copy the full SHA
    6fcd482 View commit details
    Browse the repository at this point in the history

  4. [modernize] React 

    - 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
    Dominique Quatravaux committed Jul 5, 2021
    Configuration menu
    Copy the full SHA
    158645f View commit details
    Browse the repository at this point in the history

  5. [modernize] basscss + postcss 

    - 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
    Dominique Quatravaux committed Jul 5, 2021
    Configuration menu
    Copy the full SHA
    42c2ce6 View commit details
    Browse the repository at this point in the history

  6. [modernize] Misc. dependencies

    Dominique Quatravaux committed Jul 5, 2021
    Configuration menu
    Copy the full SHA
    7f5fd8b View commit details
    Browse the repository at this point in the history

  7. [refactor] Roll our own Webpack plugin for HTML/React docs 

    - 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
    Dominique Quatravaux committed Jul 5, 2021
    Configuration menu
    Copy the full SHA
    e2d0fa8 View commit details
    Browse the repository at this point in the history

  8. [modernize] React Router API, including static rendering use-case 

    - 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
    Dominique Quatravaux committed Jul 5, 2021
    Configuration menu
    Copy the full SHA
    3c60b6b View commit details
    Browse the repository at this point in the history

  9. [fix] <Head> 

    - 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
    Dominique Quatravaux committed Jul 5, 2021
    Configuration menu
    Copy the full SHA
    8a1eea1 View commit details
    Browse the repository at this point in the history

  10. [simplify] Developer setup 

    - 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)
    Dominique Quatravaux committed Jul 5, 2021
    Configuration menu
    Copy the full SHA
    d51de73 View commit details
    Browse the repository at this point in the history

  11. [fix]&[document] double entry point in entry.jsx 

    - 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 &lt;div&gt;s in the demo pages, thereby simplifying the data flow
    Dominique Quatravaux committed Jul 5, 2021
    Configuration menu
    Copy the full SHA
    0ba1120 View commit details
    Browse the repository at this point in the history

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

    This also causes that computation to happen in the browser.
    Dominique Quatravaux committed Jul 5, 2021
    Configuration menu
    Copy the full SHA
    f6b31b1 View commit details
    Browse the repository at this point in the history

  13. [refactor] Twitter button script near Twitter button

    Dominique Quatravaux committed Jul 5, 2021
    Configuration menu
    Copy the full SHA
    6148067 View commit details
    Browse the repository at this point in the history

  14. [modernize] react-hsl-sliders → HslSliders 

    [`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.
    Dominique Quatravaux committed Jul 5, 2021
    Configuration menu
    Copy the full SHA
    4998713 View commit details
    Browse the repository at this point in the history

  15. [rebuild] Demos and assets 

    ```
npm run prod
```
    Dominique Quatravaux committed Jul 5, 2021
    Configuration menu
    Copy the full SHA
    b700fe2 View commit details
    Browse the repository at this point in the history