Infra: Programmatically update one-page.html (#828)

- Write helper script wrapped in `yarn build-one-page` to take `examples/js/index.js` source, babelify it from JSX to HTM, and update `examples/one-page.html`
- Minorly change `examples/js/index.js` to be more inline with eventual one-page consumption (just a ReactDOM import)
- Update to `htm@3` in one-page and notes as well as depended libs.
- Update Basic Concepts docs to have a fully working one-page example.

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 =======
 
+## UNRELEASED
+
+- Update `examples/one-page.html` to `examples/js/index.js` with new script helper.
+
 ## 6.0.0-alpha.7
 
 - Fix `one-page.html` closing tags.

CONTRIBUTING.md

@@ -94,6 +94,8 @@ $ yarn start:one-page
 
 **Note**: This file is published and used by `spectacle-cli`.
 
+**Development Note**: This JS code portion of this file is programmatically updated from the source in `examples/js/index.js` directly into `one-page.html`. Rather than editing directly, please run `yarn build-one-page` and verify changes look good.
+
 ### Examples integration with `spectacle-cli`
 
 `spectacle-cli` uses our `js,md,one-page` examples in the CLI and boilerplate tools. To check that changes to these files don't break `spectacle-cli` upstream, check with something like the following:
@@ -164,6 +166,7 @@ Thanks for taking the time to help us make Spectacle even better! Before you go
 ahead and submit a PR, make sure that you have done the following:
 
 - Run all checks using `yarn check-ci`.
+- Run `yarn build-one-page` and check + commit changes to `examples/one-page.html`
 - Check that both the core library and _all_ examples build: `yarn build && yarn build-examples`.
 - Update the [type definitions](./index.d.ts) for anything that modifies the Spectacle API,
   like breaking changes or new features.

docs/content/basic-concepts.md

@@ -93,9 +93,9 @@ $ spectacle-boilerplate
 To create a Spectacle presentation that lives in a single HTML page, you will only need to add a few scripts to your setup:
 
 ```html
-<script src="https://unpkg.com/react@16.10.1/umd/react.production.min.js"></script>
-<script src="https://unpkg.com/react-dom@16.10.1/umd/react-dom.production.min.js"></script>
-<script src="https://unpkg.com/react-is@16.10.1/umd/react-is.production.min.js"></script>
+<script src="https://unpkg.com/react@16.12.0/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/react-is@16.12.0/umd/react-is.production.min.js"></script>
 <script src="https://unpkg.com/prop-types@15.7.2/prop-types.min.js"></script>
 <script src="https://unpkg.com/spectacle/dist/spectacle.js"></script>
 ```
@@ -105,23 +105,30 @@ To create a Spectacle presentation that lives in a single HTML page, you will on
 ```html
 <script type="module">
   // import Spectacle elements just like you might in JSX
-  const { Deck, Slide } = Spectacle;
+  const { Deck, Slide, FlexBox, Heading } = Spectacle;
 
   // bind to the DOM
-  import htm from 'https://unpkg.com/htm@2.2.1?module';
+  import htm from 'https://unpkg.com/htm@^3?module';
   const html = htm.bind(React.createElement);
 
   // add some content
   const deck = html`
-    <${Deck} theme=${customTheme}>
+    <${Deck}>
       <${Slide}>
         <${FlexBox} height="100%" flexDirection="column">
-          <${Heading} fontSize="150px">SPECTACLE<//>
-          <${Heading} fontSize="h2">A ReactJS Presentation Library<//>
-        <//>
-      <//>
-    <//>
+          <${Heading} fontSize="150px">SPECTACLE</${Heading}>
+          <${Heading} fontSize="h2">A ReactJS Presentation Library</${Heading}>
+        </${FlexBox}>
+      </${Slide}>
+    </${Deck}>
   `;
+
+  ReactDOM.render(
+    html`
+      <${Presentation} />
+    `,
+    document.getElementById('root')
+  );
 </script>
 ```
 

examples/js/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import ReactDOM from 'react-dom';
 
 import {
   Appear,
@@ -230,4 +230,4 @@ const Presentation = () => (
   </Deck>
 );
 
-render(<Presentation />, document.getElementById('root'));
+ReactDOM.render(<Presentation />, document.getElementById('root'));