npm - neo.mjs - Versions diffs - 6.9.12 → 6.10.1 - Mend

neo.mjs 6.9.12 → 6.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/BACKERS.md +0 -30
package/apps/ServiceWorker.mjs +2 -2
package/apps/learnneo/index.html +8 -4
package/apps/learnneo/view/LivePreview.mjs +171 -0
package/apps/learnneo/view/home/ContentTreeList.mjs +91 -8
package/apps/learnneo/view/home/MainContainerController.mjs +5 -20
package/examples/ServiceWorker.mjs +2 -2
package/examples/button/base/neo-config.json +1 -2
package/package.json +4 -8
package/resources/data/deck/learnneo/p/2023-10-01T18-29-19-158Z.md +14 -16
package/resources/data/deck/learnneo/p/2023-10-07T19-18-28-517Z.md +9 -17
package/resources/data/deck/learnneo/p/2023-10-08T20-20-07-934Z.md +7 -5
package/resources/data/deck/learnneo/p/2023-10-14T19-25-08-153Z.md +18 -22
package/resources/data/deck/learnneo/p/2023-10-31T13-59-37-550Z.md +31 -0
package/resources/data/deck/learnneo/p/MainThreadAddonExample.md +15 -0
package/resources/data/deck/learnneo/p/MainThreadAddonIntro.md +46 -0
package/resources/data/deck/learnneo/p/TestLivePreview.md +10 -0
package/resources/data/deck/learnneo/p/stylesheet.md +3 -7
package/resources/data/deck/learnneo/t.json +126 -56
package/resources/images/logos/Github-logo-black.svg +1 -0
package/resources/images/logos/Slack-logo-black.svg +17 -0
package/resources/scss/src/apps/learnneo/home/ContentView.scss +6 -0
package/resources/scss/src/list/Base.scss +5 -1
package/resources/scss/theme-neo-light/Global.scss +7 -5
package/resources/scss/theme-neo-light/button/Base.scss +46 -45
package/resources/scss/theme-neo-light/design-tokens/Component.scss +4 -0
package/resources/scss/theme-neo-light/design-tokens/Core.scss +23 -22
package/resources/scss/theme-neo-light/design-tokens/Semantic.scss +5 -2
package/resources/scss/theme-neo-light/list/Base.scss +2 -4
package/resources/scss/theme-neo-light/tab/header/Button.scss +1 -1
package/src/DefaultConfig.mjs +2 -2
package/src/component/StatusBadge.mjs +194 -246
package/src/component/Video.mjs +19 -25
package/src/controller/Base.mjs +3 -4
package/src/core/Base.mjs +2 -2
package/src/form/field/Text.mjs +2 -2
package/src/form/field/TextArea.mjs +3 -3
package/src/main/DomAccess.mjs +64 -70
package/src/main/DomEvents.mjs +1 -1
package/src/main/addon/HighlightJS.mjs +16 -1
package/src/main/addon/Mwc.mjs +14 -5
package/src/worker/Manager.mjs +8 -3
package/apps/learnneo/view/home/ContentComponent.mjs +0 -24
package/examples/container/dialog/MainContainer.mjs +0 -68
package/examples/container/dialog/MainContainerController.mjs +0 -84
package/examples/container/dialog/app.mjs +0 -6
package/examples/container/dialog/index.html +0 -11
package/examples/container/dialog/neo-config.json +0 -7
package/resources/scss/src/apps/learnneo/home/ContentComponent.scss +0 -61
package/resources/scss/src/apps/newwebsite/MainContainer.css +0 -33
package/resources/scss/theme-neo-light/design-tokens/Components.scss +0 -3
package/src/container/Dialog.mjs +0 -205
package/src/main/addon/Dialog.mjs +0 -68

package/BACKERS.md CHANGED Viewed

@@ -21,36 +21,6 @@ to an entire new level.
 This is something I would love to share with you!
-<h3 align="center">Generous Backers</h3>
-<!--generous backers start-->
-<table>
-  <tbody>
-    <tr>
-      <td align="center" valign="middle">
-        <a href="https://github.com/keckeroo">
-          <img width="40px" src="https://avatars.githubusercontent.com/u/1653769?v=4">
-        </a>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<!--generous backers end-->
-<h3 align="center">Backers</h3>
-<!--backers start-->
-<table>
-  <tbody>
-    <tr>
-      <td align="center" valign="middle">
-        <a href="https://github.com/pyccyp">
-          <img width="40px" src="https://avatars.githubusercontent.com/u/66266683?v=4">
-        </a>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<!--backers end-->
 ## Special Offer
 The first 4 Bronze, and the first 4 Silver tier sponsors will get kept on the main Readme file for an additional year,
 after the day the 4th sponsor does sign up (*).

package/apps/ServiceWorker.mjs CHANGED Viewed

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.9.12'
+         * @member {String} version='6.10.1'
          */
-        version: '6.9.12'
+        version: '6.10.1'
     }
     /**

package/apps/learnneo/index.html CHANGED Viewed

@@ -5,13 +5,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="UTF-8">
     <title>LearnNeo</title>
-    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500;1,8..60,600;1,8..60,700&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500;1,8..60,600;1,8..60,700&display=swap"
+        rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <script>
+    </script>
 </head>
 <body>
     <script src="../../src/MicroLoader.mjs" type="module"></script>
 </body>
-</html>
+</html>

package/apps/learnneo/view/LivePreview.mjs ADDED Viewed

@@ -0,0 +1,171 @@
+import Base from '../../../src/container/Base.mjs';
+import TabContainer from '../../../src/tab/Container.mjs';
+import TextArea from '../../../src/form/field/TextArea.mjs';
+/**
+ * @class LearnNeo.view.LivePreview
+ * @extends Neo.container.Base
+ */
+class LivePreview extends Base {
+    static config = {
+        /**
+         * @member {String} className='LearnNeo.view.LivePreview'
+         * @protected
+         */
+        className: 'LearnNeo.view.LivePreview',
+        value_: null,
+        autoMount: true,
+        autoRender: true,
+        height: 400,
+        layout: 'fit',
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: TabContainer,
+            items: [{
+                module: TextArea,
+                hideLabel: true,
+                style: {height: '100%'},
+                reference: 'textArea',
+                tabButtonConfig: {
+                    text: 'Editor'
+                },
+            }, {
+                tabButtonConfig: {
+                    text: 'Preview'
+                },
+                reference: 'preview',
+                ntype: 'container'
+            }]
+        }],
+        listeners: {
+            activeIndexChange: () => console.log('activeIndexChange')
+        }
+    }
+    onConstructed() {
+        console.log('constructed');
+        this.on('activeIndexChange', () => console.log('onConstructed'));
+        super.onConstructed();
+    }
+    afterSetValue(value, oldValue) {
+        if (value) {
+            this.getItem('textArea').value = value;
+        }
+    }
+    doIt(button) {
+        let source = this.getReference('source').getValue();
+        this.getReference('codePreview').src = source;
+        const importRegex = /import\s+([\w-]+)\s+from\s+['"]([^'"]+)['"]/;
+        const exportRegex = /export\s+(?:default\s+)?(?:const|let|var|class|function|async\s+function|generator\s+function|async\s+generator\s+function|(\{[\s\S]*?\}))/g;
+        const cleanLines = [];
+        const importPromises = [];
+        const importModuleNames = [];
+        const moduleNameAndPath = [];
+        source.split('\n').forEach(line => {
+            let importMatch = line.match(importRegex);
+            if (importMatch) {
+                let moduleName = importMatch[1];
+                let path = importMatch[2];
+                moduleNameAndPath.push({
+                    moduleName,
+                    path
+                });
+                // importPromises.push(import(path));
+                // importPromises.push(import(path).then(module => {
+                //     eval(`const ${moduleName} = module.default;`)
+                // }));
+                importModuleNames.push(moduleName);
+            } else if (line.match(exportRegex)) {
+                // Skip export statements
+            } else {
+                cleanLines.push(line);
+            }
+        });
+        var params = [];
+        var vars = [];
+        // Figure out the parts of the source we'll be running.
+        // o The promises/import() corresponding to the user's import statements
+        // o The vars holding the name of the imported module based on the module name for each import
+        // o The rest of the user-provided source
+        // It'll end up looking like this:
+        // Promise.all([
+        //     import('../../../node_modules/neo.mjs/src/container/Base.mjs'),
+        //     import('../../../node_modules/neo.mjs/src/button/Base.mjs')
+        //   ]).then(([BaseModule, ButtonModule]) => {
+        //       const Base = BaseModule.default;
+        //       const Button = ButtonModule.default;
+        //       // Class declaration goes here...
+        //   });
+        // Making the promise part of the eval seems weird, but it made it easier to
+        // set up the import vars.
+        let promises = moduleNameAndPath.map(item => {
+            params.push(`${item.moduleName}Module`);
+            vars.push(`const ${item.moduleName} = ${item.moduleName}Module.default`);
+            return `import("${item.path}")`;
+        });
+        const codeString = `
+            Promise.all([
+                ${promises.join(',\n')}
+            ])
+            .then(([${params.join(', ')}]) => {
+                    ${vars.join('\n')}
+                    ${cleanLines.join('\n')}
+                    container.add({module:Bar});
+                })
+            .catch(error=>container.add({ntype:'component',html:error.message}));
+        `;
+        // console.log(codeString);
+        const container = this.getReference('preview');
+        container.removeAll();
+        try {
+            const dynamicCode = new Function('container', codeString);
+            dynamicCode(container);
+        } catch (error) {
+            container.add({
+                ntype: 'component',
+                html: error.message
+            })
+        }
+    }
+    /**
+    * @param {String} reference
+    * @returns {Object|Neo.component.Base|null}
+    */
+    getItem(reference, items = this.items) {
+        let i = 0,
+            len = items.length,
+            item,
+            childItem;
+        for (; i < len; i++) {
+            item = items[i];
+            if (item.reference === reference) {
+                return item
+            } else if (item.items) {
+                childItem = this.getItem(reference, item.items);
+                if (childItem) {
+                    return childItem;
+                }
+            }
+        }
+        return null
+    }
+}
+Neo.applyClassConfig(LivePreview);
+export default LivePreview;

package/apps/learnneo/view/home/ContentTreeList.mjs CHANGED Viewed

@@ -1,5 +1,6 @@
 import ContentStore from '../../store/Content.mjs'
-import TreeList     from '../../../../src/tree/List.mjs';
+import TreeList from '../../../../src/tree/List.mjs';
+import LivePreview from '../LivePreview.mjs';
 /**
  * @class LearnNeo.view.home.ContentTreeList
@@ -35,27 +36,103 @@ class ContentTreeList extends TreeList {
      * @returns {Promise<void>}
      */
     async doFetchContent(record) {
-        let me   = this,
+        let me = this,
             path = `${me.contentPath}`;
         path += record.path ? `/pages/${record.path}` : `/p/${record.id}.md`;
         if (record.isLeaf && path) {
-            const data    = await fetch(path);
+            const data = await fetch(path);
             const content = await data.text();
+            let modifiedHtml = await this.highlightPreContent(content);
-            await Neo.main.addon.Markdown.markdownToHtml(content)
+            // Replace <pre data-neo></neo> with <div id='neo-preview-1'/>
+            // and creaet a map keyed by ID, whose value is the javascript
+            // from the <pre>
+            let neoDivs = {};
+            modifiedHtml = this.extractNeoContent(modifiedHtml, neoDivs);
+            await Neo.main.addon.Markdown.markdownToHtml(modifiedHtml)
                 .then(
                     html => me.fire('contentChange', {
                         component: me,
                         html,
                         record,
-                        isLab    : record.name?.startsWith('Lab:')
+                        isLab: record.name?.startsWith('Lab:')
                     }),
-                    () => me.fire('contentChange', {component: me}))
+                    () => me.fire('contentChange', {component: me}));
+            await this.timeout(50);
+            Object.keys(neoDivs).forEach(key => {
+                // Create LivePreview for each iteration, set value to neoDivs[key]
+                let foo = Neo.create(LivePreview, {
+                    value: neoDivs[key],
+                    parentId: key,
+                    appName: this.appName
+                })
+                console.log(foo);
+            });
         }
     }
+    extractNeoContent(htmlString, map) {
+        // 1. Replace <pre data-neo> with <div id='neo-preview-2'/>
+        // and update map with key/value pairs, where the key is the ID and the value is the <pre> contents.
+        // Define a regular expression to match <pre data-javascript> tags
+        const preRegex = /<pre\s+data-neo\s*>([\s\S]*?)<\/pre>/g;
+        let count = 0;
+        // Replace the content with tokens, and create a promise to update the corresponding content
+        var updatedHtml = htmlString.replace(preRegex, (match, preContent) => {
+            const key = `pre-live-preview-${Neo.core.IdGenerator.getId()}-${count++}`;
+            map[key] = preContent;
+            return `<div id="${key}"/>`;
+        });
+        return updatedHtml;
+    }
+    async highlightPreContent(htmlString) {
+        // 1. Replace <pre data-javascript> with unique tokens and create a HighlightJS.highlightAuto promise for each
+        // 2. When all promises are resolved, use their values to replace the tokens.
+        // Note that if we were to import HighlightJS directly, we wouldn't need all this async code.
+        // Define a regular expression to match <pre data-javascript> tags
+        const preRegex = /<pre\s+data-javascript\s*>([\s\S]*?)<\/pre>/g;
+        // Create an array to store promises for each replacement
+        const replacementPromises = [];
+        let count = 0;
+        // Replace the content with tokens, and create a promise to update the corresponding content
+        var updatedHtml = htmlString.replace(preRegex, (match, preContent) => {
+            const token = `__NEO-PRE-TOKEN-${++count}__`;
+            replacementPromises.push(this.getHighlightPromise(preContent, token, `pre-preview-${Neo.core.IdGenerator.getId()}`));
+            return token;
+        });
+        // Assert: updateHtml is the original, but with <pre data-javascript> replaced with tokens.
+        // Wait for all replacement promises to resolve
+        return Promise.all(replacementPromises)
+            .then(replacements => {
+                // Replace each token with the resolved content
+                replacements.forEach((replacement) => updatedHtml = updatedHtml.replace(replacement.token, replacement.after));
+                // Return the final updated HTML string
+                return updatedHtml;
+            });
+    }
+    getHighlightPromise(preContent, token, id) {
+        // Resolves to an object of the form {after, token}, where after is the updated <pre> tag content
+        return Neo.main.addon.HighlightJS.highlightAuto(preContent)
+            .then(highlight => ({after: `<pre data-javascript id="${id}">${highlight.value}</pre>`, token}));
+    }
     /**
      *
      */
@@ -79,11 +156,17 @@ class ContentTreeList extends TreeList {
         let me = this;
+        Neo.main.addon.HighlightJS.loadLibrary({
+            appName: me.appName,
+            highlightJsPath: '../../docs/resources/highlight/highlight.pack.js',
+            themePath: '../../docs/resources/highlightjs-custom-github-theme.css'
+        });
         Neo.Main.getByPath({path: 'location.search'})
             .then(data => {
                 const searchString = data?.substr(1) || '';
-                const search       = searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {};
-                me.deck            = search.deck || 'learnneo';
+                const search = searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {};
+                me.deck = search.deck || 'learnneo';
                 me.doLoadStore();
                 console.log(search);

package/apps/learnneo/view/home/MainContainerController.mjs CHANGED Viewed

@@ -28,9 +28,9 @@ class MainContainerController extends Controller {
         fetch('../../../../resources/data/deck/EditorConfig.json')
             .then(response => response.json()
-            .then(data =>
-                this.getModel().setData('editorConfig', data)
-            ))
+                .then(data =>
+                    this.getModel().setData('editorConfig', data)
+                ))
     }
     /**
@@ -38,29 +38,14 @@ class MainContainerController extends Controller {
      * @returns {Promise<void>}
      */
     async onContentChange(data) {
-        let me      = this,
+        let me = this,
             content = me.getReference('content');
         content.toggleCls('lab', data.isLab);
-        content.html   = data.html;
+        content.html = data.html;
         content.record = data.record;
-        await me.timeout(200);
-        // todo: we need to add the links as neo configs
-        await Neo.main.addon.HighlightJS.loadLibrary({
-            appName        : me.appName,
-            highlightJsPath: '../../docs/resources/highlight/highlight.pack.js',
-            themePath      : '../../docs/resources/highlightjs-custom-github-theme.css'
-        });
-        await me.timeout(200);
-        Neo.main.addon.HighlightJS.syntaxHighlightInit({
-            appName: me.appName,
-            vnodeId: content.id
-        })
     }
     /**

package/examples/ServiceWorker.mjs CHANGED Viewed

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.9.12'
+         * @member {String} version='6.10.1'
          */
-        version: '6.9.12'
+        version: '6.10.1'
     }
     /**

package/examples/button/base/neo-config.json CHANGED Viewed

@@ -2,6 +2,5 @@
     "appPath"    : "examples/button/base/app.mjs",
     "basePath"   : "../../../",
     "environment": "development",
-    "mainPath"   : "./Main.mjs",
-    "themes"     : ["neo-theme-neo-light"]
+    "mainPath"   : "./Main.mjs"
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.9.12",
+    "version": "6.10.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -41,10 +41,8 @@
         "url": "https://github.com/neomjs/neo/issues"
     },
     "homepage": "https://neomjs.github.io/pages/",
-    "dependencies": {
+    "devDependencies": {
         "@fortawesome/fontawesome-free": "^6.4.2",
-        "@material/mwc-button": "^0.27.0",
-        "@material/mwc-textfield": "^0.27.0",
         "autoprefixer": "^10.4.16",
         "chalk": "^5.3.0",
         "clean-webpack-plugin": "^4.0.0",
@@ -58,17 +56,15 @@
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.31",
         "sass": "^1.69.5",
+        "siesta-lite": "5.5.2",
         "showdown": "^2.1.0",
+        "url": "^0.11.3",
         "webpack": "^5.89.0",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "4.15.1",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"
     },
-    "devDependencies": {
-        "siesta-lite": "5.5.2",
-        "url": "^0.11.3"
-    },
     "funding": {
         "type": "GitHub Sponsors",
         "url": "https://github.com/sponsors/tobiu"

package/resources/data/deck/learnneo/p/2023-10-01T18-29-19-158Z.md CHANGED Viewed

@@ -3,29 +3,27 @@ Neo.mjs is a framework used to create <mark>browser-based</mark> applications.
 # Some key features and benefits of Neo.mjs are:
-<code><A code snippet></code>
 <details>
-<summary>Multi-Threaded</summary>
+<summary><h2>Multi-Threaded</h2></summary>
 <p>
 When a Neo.mjs application starts, the framework spawns three web-workers, in addition
 to the main browser thread, resulting in:
 <ol>
 <li>The <b>main</b> browser thread, where DOM updates are applied
-<li>An <b>application</b> web-worker where normal application locic is run
+<li>An <b>application</b> web-worker where normal application logic is run
 <li>A <b>data</b> web-worker were HTTP and socket calls are run
 <li>A <b>view</b> web-worker that manages delta updates
 </ol>
 </details>
 <details>
-<summary>Extreme Speed</summary>
+<summary><h2>Extreme Speed</h2></summary>
 <p>
-Web-worker proccesses are automatically run in parallel, on separate CPU cores.
+Web-worker processes are automatically run in parallel, on separate CPU cores.
 </p>
 <p>
 By contrast, other JavaScript frameworks run in a single thread. That means
 in a typical framework all business logic, data handling, and DOM rendering compete for
-CPU reasources.
+CPU resources.
 </p>
 <p>
 This means Neo.mjs applications run and render faster. This is
@@ -39,14 +37,14 @@ to run other specialized logic.
 </p>
 </details>
 <details>
-<summary>Quick Application Development</summary>
+<summary><h2>Quick Application Development</h2></summary>
 <p>
-Neo.js classes let you specify properties in a way that allows code to detect "before" and "after"
+Neo.mjs classes let you specify properties in a way that allows code to detect "before" and "after"
 changes. This makes it easy to handle value validation and transformation, and react to changes.
 </p>
 <p>
 Neo.mjs also has elegant yet powerful state management features that make it easy to create shared,
-bindable data. For example, if two components are bound to the same propery, a change to the
+bindable data. For example, if two components are bound to the same property, a change to the
 property will automatically be applied to both components.
 </p>
 <p>
@@ -57,7 +55,7 @@ update its properties &dash; these updates are immediately reflected in the runn
 </p>
 </details>
 <details>
-<summary>Multi-Window Applications</summary>
+<summary><h2>Multi-Window Applications</h2></summary>
 <p>
 Neo.mjs applications can also launch as <i>shared web workers</i>, which allows you to have a single
 application run in multiple browser windows; those windows could be moved to multiple monitors.
@@ -69,10 +67,10 @@ across windows, running seamlessly as a single application.
 </p>
 </details>
 <details>
-<summary>Open-Source and Standards-Based</summary>
+<summary><h2>Open-Source and Standards-Based</h2></summary>
 <p>
-Neo.mjs is an open-source library. Features needed for the community can be added to the
-library via pull-requests. And since Neo.mjs uses the standard JavaScript class system,
+Neo.mjs is an open-source framework. Features needed for the community can be added to the
+framework via pull-requests. And since Neo.mjs uses the standard JavaScript class system,
 all Neo.mjs classes can be extended.
 </p>
 <p>
@@ -80,11 +78,11 @@ Neo.mjs uses standard modular JavaScript, so developers don't need to learn non-
 syntax, and there's no need for special pre-compilers or WebPack modules.
 That means fewer dependencies and easier configuration. Furthermore, the use of
 standard JavaScript makes debugging easier: any statement you write while developing your
-applcation can also be run in the debugging console.
+application can also be run in the debugging console.
 </p>
 </details>
 <details>
-<summary>Scalable</summary>
+<summary><h2>Scalable</h2></summary>
 <p>
 Applications can become exponentially difficult to implement as application
 complexity increases. In contrast, the effort to code applications in Neo.mjs

package/resources/data/deck/learnneo/p/2023-10-07T19-18-28-517Z.md CHANGED Viewed

@@ -1,9 +1,8 @@
 Neo.mjs classes are standard JavaScript classes. Every source file
 you write will be a class definition, extending some Neo.mjs
-class.
+class.
-<pre>
-<code class="javascript">
+<pre data-javascript>
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 class Mammal extends Base {
@@ -14,15 +13,14 @@ class Mammal extends Base {
 const myMammal = Neo.create(Mammal);
-Neo.applyClassConfig(Mammal); // Where Neo.mjs initialializes the class config.
+Neo.applyClassConfig(Mammal); // Where Neo.mjs initializes the class config.
 export default Mammal;        // Makes the class available elsewhere.
-</code>
 </pre>
 In the example above, we're extending the Neo.mjs base class. The static
-config block describes the class we're defining.
-All classes specify `className`; you'll add other config properties to describe the class.
+config block is unique to Neo.mjs; it provides a way of defining special
+properties, such as the `className` seen above. Over time we'll go into more detail
+on the static config property.
 The `const myMammal = Neo.create(Mammal);` statement creates an instance of
 our class. For the sake of our discussion we're putting that statement in the same source
@@ -31,8 +29,7 @@ and create instances as needed.
 Let's add a `name` propery to the class.
-<pre>
-<code class="javascript">
+<pre data-javascript>
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 class Mammal extends Base {
@@ -50,7 +47,6 @@ console.log(myMammal.name);           // Logs "Herbert"
 Neo.applyClassConfig(Mammal);
 export default Mammal;
-</code>
 </pre>
 In Neo.mjs, instance properties are usually added in the `static config` block.
@@ -65,13 +61,11 @@ anywhere in the class hierarchy.
 Since our class defines a `name` property, we can specify that when creating
 the instance, using the second argument to the `create` method.
-<pre>
-<code class="javascript">
+<pre data-javascript>
 const myMammal = Neo.create(Mammal, {
     name: 'Creature'
 });
 console.log(myMammal.name);           // Logs "Creature"
-</code>
 </pre>
@@ -79,8 +73,7 @@ Since _you_ define those properties, you can
 look for them in class methods and use them as needed.
 Let's add a `speak()` method that uses the `name` property.
-<pre>
-<code class="javascript">
+<pre data-javascript>
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 class Mammal extends Base {
@@ -103,7 +96,6 @@ myMammal.speak(); // Logs "Creature is grunting."
 Neo.applyClassConfig(Mammal);
 export default Mammal;
-</code>
 </pre>