highmark

Please note that Highmark.js is in ongoing initial development and exists as an npm package to test production builds and distribution only.

Usage no npm install needed!

<script type="module">
  import highmark from 'https://cdn.skypack.dev/highmark';
</script>

README

Highmark.js

Please note that Highmark.js is in ongoing initial development and exists as an npm package to test production builds and distribution only.

To start up a development server

yarn run server:dev - Builds the files in watch mode and runs server

Setup

  • Install node packages

  • Setup express server

  • Create seperate client and server react entrypoints

    • Client entry rendered with BrowerRouter
    • Server entry rendered with StaticRouter

  • Server Side Rendering

    • Create a server version of webpack bundle
    • Reduce server bundle size by forcing external packages to not be bundled (not sure if this will still work in Ruby environment, was built for node)
    • Use isomorphic-style-loader to avoid CSS trying to add to DOM on server
    • Use react-universal to do lazy loading client-side and instant loading server-side
    • Add babel-plugin-universal-import so babel picks up react-universal properly
    • Limit server-side chunks to 1 to avoid async loading files
    • Add extract-css-chunks-webpack-plugin to get css chunks in webpack stats output (of the client bundle, server bundle is now only one file)
    • Enable webpack stats output (so server knows what script and link tags to send on a page)
    • Add method to push data back to head of page (PushDataTag)

  • Add webpack-flush-chunks and patch it into react-universal

  • Import stats file and plugin to webpack-flush-chunks

  • Load initial data server-side and prefill page (React.Suspense required)

    • It could be possible to do initial render pass, collect all the promises and then resolve them manually into page headers

  • Avoid loading data if page is pre-filled

    • Data is cached based on resolver and serialized arguments
    • Redux does something VERY similar to prefill the client store

  • Support handling oEmbed version of page based on react-router

    • Extend the push data handler to accept oEmbed tags? Then just send that result instead of page render

  • Move more packages into peerDependancy

Server

  • Directory based page routing
    • Add directory specific configuration files
    • Remove react-router and replace with a smaller custom library? (possibly offer as a config option)
  • Serve public files
  • Redis integration for publicly build pages (by specifying redis configuration in highmark.config)
  • Add a path for API calls (server-bundle only, does not use the React-router pathing)
  • Add support for changing the HTML lang attribute

Extra server things

  • Handle redirects and error codes generated by bundle
  • Send CSS/JS assets as Link prefetch headers
  • Send initial CSS as inline stylesheet
  • Send Image assets as HTTP Push headers (though not possible with )

Images

  • Resize, convert, and minify all images automatically
    • Additionally create a "sample" data url to blend the image in
    • Highly extensible per-image config files
  • Image Component
    • Finds all versions of image and creates a picture source set
    • Creates temporary "blur" render while image is loading
  • CSS loader that fills in url() rules with appropriate image-set()
  • Scoping / Chunking assets manifest to js bundle that uses them.

Build Step

  • Single command development server setup
  • Single command production build client/server
  • Directory copy Highmark instead of indivdual files