neo.mjs 9.15.0 → 10.0.0-alpha.1

package/resources/data/deck/learnneo/pages/UsingTheseTopics.md

@@ -0,0 +1,65 @@
+
+***Welcome to these Neo.mjs guides and learning resources!*** Neo.mjs is a groundbreaking JavaScript framework designed
+to help you build lightning-fast, highly scalable, and exceptionally maintainable web applications. This guide will help
+you understand the structure of these topics and get the most out of our comprehensive content.
+
+## Documentation Sections
+
+This documentation is organized into the following main sections, each serving a distinct purpose:
+
+* ***Benefits***: Describes the technical and business reasons for choosing Neo.mjs, highlighting its unique advantages.
+* ***Getting Started***: Provides installation instructions, along with fundamental concepts that are good to understand
+  before diving deeper into Neo.mjs.
+* ***Tutorials***: Offers hands-on tutorials where you'll code a few simple Neo.mjs applications.
+* ***Guides***: Contains in-depth discussions of various topics related to Neo.mjs concepts and features.
+
+## Navigating These Topics
+
+As you can see, the table of contents is on the left. Topic sections and sub-sections are shown on the right, and the
+content is here in the middle. There are "next" and "previous" buttons at the bottom of each page to make it easier to
+read several topics in sequence.
+
+## Special Features
+
+You'll find a few special features integrated into our content to enhance your learning experience:
+
+### Disclosure widgets
+
+Topics sometimes contain "disclosure" widgets, which are just `<details>` tags. These are used in cases 
+where we want to present high-level points and reveal details when the disclosure is expanded.
+
+<details>
+<summary>This is a disclosure widget</summary>
+<p style="background-color:lightgreen;padding:8px">This is a fascinating piece of information which is revealed when the widget is expanded.</p>
+</details>
+
+### Runnable examples
+
+Topics also sometimes contain runnable examples. These are shown as tab panels with Source and Preview tabs.
+
+You can also launch the preview in a window by going to the Preview tab, then clicking on the little window
+icon on the right  <span class="far fa-xs fa-window-maximize"></span>. This web site is a Neo.mjs application,
+and the ability to launch browser windows &mdash; all integrated within a single app &mdash; is a unique feature of Neo.mjs!
+
+<pre data-code-livepreview>
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
+
+class MainView extends Container {
+    static config = {
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+        items    : [{
+            module: Button,
+            text  : 'Button'
+        }]
+    }
+}
+
+MainView = Neo.setupClass(MainView);
+</pre>
+
+---
+
+Your journey into Neo.mjs starts here. The next page will guide you through its core benefits, or if you're ready to get
+hands-on, jump directly to [Getting Started](#/learn/gettingstarted.Setup) to build your first application.

package/resources/data/deck/learnneo/pages/benefits/ConfigSystem.md

@@ -10,7 +10,7 @@ and nested approach to their configuration, a gap that a class config system aim
 ## A bad example
 I recently found this Angular code snippet (new public API draft) on LinkedIn:
 
-<pre data-javascript>
+<pre data-code-readonly>
 // MyComponent with an attribute
 <MyComponent myAttribute="someValue" />
 

package/resources/data/deck/learnneo/pages/benefits/FormsEngine.md

@@ -3,7 +3,7 @@
 You do not need to define a state tree on your own.
 It is sufficient to just use namespaces inside the `name` attribute of each field.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button        from '../button/Base.mjs';
 import FormContainer from '../form/Container.mjs';
 import TextField     from '../form/field/Text.mjs';
@@ -49,7 +49,7 @@ Getting the field values still works like before.
 Use case: In case you have a form split into multiple pages and only one of them is mounted to keep
 the DOM minimal, you can still get all field values.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button        from '../button/Base.mjs';
 import Container     from '../container/Base.mjs';
 import FormContainer from '../form/Container.mjs';
@@ -104,7 +104,7 @@ Inside the example preview, clear the user lastname via hitting the x-button.
 Afterwards, click on the 3 buttons at the bottom and inspect the output inside the main window console carefully.
 
 The main form will log:
-<pre data-javascript>
+<pre data-code-readonly>
 {
     account: 'My Account',
     product: {brand: 'Tesla', name: 'Car'},
@@ -114,18 +114,18 @@ The main form will log:
 </pre>
 
 The user form will log:
-<pre data-javascript>
+<pre data-code-readonly>
 {user: {firstname: 'John', lastname: null}}
 'isValid: false'
 </pre>
 
 The product form will log:
-<pre data-javascript>
+<pre data-code-readonly>
 {product: {brand: 'Tesla', name: 'Car'}}
 'isValid: true'
 </pre>
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button        from '../button/Base.mjs';
 import Container     from '../container/Base.mjs';
 import FormContainer from '../form/Container.mjs';
@@ -244,7 +244,7 @@ since it does rely on defining child modules inside their own class files
 and dynamically importing them.
 
 In a nutshell:
-<pre data-javascript>
+<pre data-code-readonly>
 {
     module: TabContainer,
     items : [

package/resources/data/deck/learnneo/pages/benefits/FourEnvironments.md

@@ -1,7 +1,10 @@
 ## Introduction
 
-Neo.mjs was the very first frontend framework, which enabled full support for a zero builds instant development mode,
-while sticking to the latest ECMAScript features (e.g. the ES6 class system, modules and dynamic imports).
+Neo.mjs was the very first frontend framework, which enabled full support for a ***zero builds instant development mode***,
+while sticking to the latest ECMAScript features (e.g., the ES6 class system, modules and dynamic imports).
+This means that your ***primary development workflow*** with Neo.mjs involves creating and debugging your application
+***entirely within this instant, zero-builds environment***, with builds typically reserved only for ***deployment or
+specific testing scenarios***.
 
 Developers can save massive amounts of time when creating and debugging their apps, but at some point apps want to be
 deployed. To do this right, it is crucial to have an overview of the available environments.
@@ -78,7 +81,7 @@ rendering for dynamic content.
 Since the code remains in its modular, unbundled form (though optimized compared to dev mode), debugging issues in a
 live `dist/esm` environment is dramatically simpler. You're working directly with the actual files and module structure.
 
-### Seamless Shared Worker Integration
+### Seamless Web Worker Integration
 
 The same modular `dist/esm` code is efficiently loaded into both the main thread and the application worker(s), ensuring
 consistent environments and maximizing the benefits of multi-threading for responsive interfaces.
@@ -122,12 +125,8 @@ The Webpack build pipeline in `dist/production` applies aggressive optimizations
 * ***Dead Code Elimination*** (Tree Shaking): Removing any code that is not actually used by the application, further
   reducing bundle size.
 
-### Broadest Browser Compatibility
-
-Bundling typically includes polyfills and transpilation for older ECMAScript features, ensuring your application runs
-smoothly even on browsers that don't fully support the latest web standards (which dist/esm relies upon).
-
 ### Simplified Single-File Deployment
+
 For environments where serving multiple module files isn't optimal, or for legacy server setups, `dist/production`
 provides the convenience of deploying just a few highly optimized bundle files.
 
@@ -185,14 +184,14 @@ it's running in.
 
 * ***Zero Builds Development Mode***: Dynamically loaded code-based modules will, naturally, load from the dev mode
   structure itself, leveraging its instant, direct-from-source capabilities.
-* `dist/esm`: When running in the `dist/esm` environment, dynamically loaded code-based modules will be sourced from
+* ***dist/esm***: When running in the `dist/esm` environment, dynamically loaded code-based modules will be sourced from
   the dist/esm structure. This means your application consistently utilizes native ES Modules for both its core and any
   dynamically extended functionalities.
-* `dist/development`: Surprisingly, when running in the `dist/development` environment (the Webpack-bundled, unminified
+* ***dist/development***: Surprisingly, when running in the `dist/development` environment (the Webpack-bundled, unminified
   version), dynamically loaded code-based modules will revert to loading from the dev mode structure. This is because
   dist/development bundles your primary application code, but it doesn't pre-bundle every potential dynamic extension.
   Relying on the dev mode for these ensures they are unminified and retain debugging fidelity.
-* `dist/production`: Similarly, if your core application is deployed in `dist/production` (the fully optimized Webpack
+* ***dist/production***: Similarly, if your core application is deployed in `dist/production` (the fully optimized Webpack
   bundle), dynamically loaded code-based modules will be sourced from the `dist/esm` structure. This is the optimal fallback,
   as `dist/esm` provides highly performant, modular, and standards-compliant loading for individual files, which is critical
   for code that wasn't part of the initial production bundle.

package/resources/data/deck/learnneo/pages/benefits/Introduction.md

@@ -1,10 +1,43 @@
-Why do organizations choose Neo.mjs?
+## Why Organizations Choose Neo.mjs
 
-- Neo.mjs provides a lightning fast user experience, and is unique in its ability to allow multi-window applications.
+Are your development teams burdened by slow build times, the debugging complexities introduced by transpilation and
+unreliable source maps, or battling UI freezes because ***traditional frameworks (like Angular, React, or Vue) often limit
+your application to a single CPU core?*** Traditional frontend development often comes with these frustrating compromises.
 
-- Neo.mjs applications scale well, from simple to extremely complex
+***Neo.mjs fundamentally redefines the web development experience, offering a solution that is both revolutionary for
+developers and unmatched in performance.***
 
-- Neo.mjs uses standards-based Javascript, without library-specific addons or special transpilation
+### Lightning-Fast Development & App-Centric Creation
 
+Forget the constant interruptions of build processes in your daily workflow. Neo.mjs empowers an instant, zero-builds
+development mode, allowing you to work directly with 100% web standards-based JavaScript. This dramatically accelerates
+your team's velocity and simplifies debugging, letting you focus purely on innovation.
 
-Read on to learn more about Neo.mjs key features and benefits...
+Moreover, Neo.mjs shifts the paradigm: instead of just writing UI components that feel like HTML, you'll ***create entire
+applications***. Thanks to its revolutionary ***Unified Config System***, you define complex application structures—from
+components and layouts to data models—purely through declarative configurations, gaining exceptional control and efficiency.
+
+### Unparalleled Performance & Scalability
+
+Neo.mjs is engineered from the ground up for extreme performance. Unlike most frameworks that are limited to a single CPU
+core per browser tab, Neo.mjs leverages a ***truly multi-threaded architecture***. Your application logic runs ***off the
+main thread*** across Web Workers, ensuring your UI remains silky smooth, responsive, and free from freezes,
+even under heavy computation.
+
+This unique design enables your applications to scale not just in raw performance, but also in ***complexity and scope,
+growing effortlessly from a tiny proof-of-concept to a massive enterprise application with hundreds of dynamic views.***
+Features like intelligent lazy loading and runtime-built state trees ensure the framework effortlessly manages large-scale
+application growth and intricate multi-window experiences.
+
+### Architectural Brilliance & Future-Proofing
+
+Built on cutting-edge web standards, Neo.mjs embraces an "Application Worker being the Main Actor" paradigm.
+This robust architecture inherently prevents common issues like UI blocking, and its isolated thread model significantly
+helps to mitigate memory leaks by containing them within specific worker contexts. Furthermore, Neo.mjs
+uniquely handles ***dynamic, run-time module imports*** without the traditional bundler overhead, offering flexibility
+for advanced scenarios like user-editable code.
+
+---
+
+***Read on to learn more about Neo.mjs's key features and benefits, and how it can transform your web application
+development.***

package/resources/data/deck/learnneo/pages/benefits/MultiWindow.md

@@ -14,7 +14,7 @@ running the code. Even though it's running in a new window, it's still part of t
 (In this case, the app is the web site you're looking at now.) That means both the code in both windows 
 seamlessly share events, data, etc. — the code doesn't care that some code is running in a
 separate window.
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 

package/resources/data/deck/learnneo/pages/benefits/Speed.md

@@ -20,7 +20,7 @@ Click on Preview, then use your mouse or trackpad to pan and zoom — the he
 If you move quickly, you might reach 20,000 or 30,000 delta updates per second. We've seen some examples that go over 40,000 updates per 
 second — but we've never actually hit the limit.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 import Helix     from '../component/Helix.mjs';
 

package/resources/data/deck/learnneo/pages/gettingstarted/ComponentModels.md

@@ -3,7 +3,7 @@ Neo has a feature that allows shared, bindable, data.
 A _state provider_ — `Neo.state.Provider` — instance holds properties that 
 can be bound to component properties.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from  '../container/Base.mjs';
 import Label     from  '../component/Label.mjs';
 import TextField from  '../form/field/Text.mjs';
@@ -55,7 +55,7 @@ usually coded as separate classes.)
 
 Below is another example.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from  '../container/Base.mjs';
 import Label     from  '../component/Label.mjs';
 import Panel     from  '../container/Panel.mjs';

package/resources/data/deck/learnneo/pages/gettingstarted/Config.md

@@ -17,7 +17,7 @@ Here's an example of a new component class `Simple` with three config properties
 The `Simple` class introduces syntax. It doesn't have any content, so if you run the code you won't 
 see anything. We'll change that in the next example.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -57,7 +57,7 @@ a _lifecyle property_. A lifecycle property provides methods that are run as the
 updated or accessed. You're free to implment these methods to provide business rules, normalize
 values, or have side-effects, such as updating a view or firing an event.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -110,7 +110,7 @@ Typically, the _afterSet_ method is used to update a view or to fire an event.
 
 Look at this code: `afterSetBar()` fires an event, and the config in the `items[]` is listening to it.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 

package/resources/data/deck/learnneo/pages/gettingstarted/DescribingTheUI.md

@@ -10,7 +10,7 @@ use to describe the component you're creating> You can also access or set the pr
 
 ## A view with one component
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -46,7 +46,7 @@ Let's put a second button in the container.
 
 ## A view with two components
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 

package/resources/data/deck/learnneo/pages/gettingstarted/Events.md

@@ -13,7 +13,7 @@ pairs as you need.
 The code below shows two text fields, with `listeners` for `change` and `focusEnter`.
 (The events for any component are documented in the API docs.)
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';
 
@@ -52,7 +52,7 @@ that with a _component controller_.
 A `Neo.controller.Component` is a simple class associated with a component class. As a view is created, an 
 instance of its associated controller is automatically created. 
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Base from '../controller/Component.mjs';
 
 class MainViewController extends Base {
@@ -116,7 +116,7 @@ automatically get lifecycle methods run before the value is assigned, after the
 before the value is accessed. We're using the _after_ method to fire a `change` event.
 
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 

package/resources/data/deck/learnneo/pages/gettingstarted/Extending.md

@@ -5,7 +5,7 @@ to test.
 
 Consider this code. It's a panel with a header and a table. The table has a store. 
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button from '../button/Base.mjs';
 import Panel  from '../container/Panel.mjs';
 import Table  from '../table/Container.mjs';
@@ -48,7 +48,7 @@ If you wanted, any of the configs can be refactored into their own class. Here,
 have been refactored into their own classes, and the main view is using them. The main view is simpler and
 more abstract, and each class can be reused, tested, and maintained independently. 
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button from '../button/Base.mjs';
 import Panel  from '../container/Panel.mjs';
 import Store  from '../data/Store.mjs';

package/resources/data/deck/learnneo/pages/gettingstarted/References.md

@@ -10,7 +10,7 @@ There are two common ways of doing that:
 Here's an example with one button. Clicking on the button will disable it. 
 As you can see, the handler uses the component reference pass in via `data.component`.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button     from '../button/Base.mjs';
 import Container  from '../container/Base.mjs';
 import Controller from '../controller/Component.mjs';
@@ -47,7 +47,7 @@ But what if we need to get a reference to another component in the view? In that
 you tag the component you need with a `reference` config, then use `getReference()` in
 the controller.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button     from '../button/Base.mjs';
 import Container  from '../container/Base.mjs';
 import Controller from '../controller/Component.mjs';
@@ -102,7 +102,7 @@ But app logic should never use `Neo.findFirst()` and very rarely use `up()` or `
 The following example gets a reference to the _Learn_ button at the top of this site, and changes its `text`.
 Again &mdash; that use of `Neo.findFirst()` might be handy when debugging, but it should never be used in app logic.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 

package/resources/data/deck/learnneo/pages/gettingstarted/Workspaces.md

@@ -40,7 +40,7 @@ as well as create new views classes, their controllers, and other application lo
 
 Now let's look at a source file. This is the contents of `MainView.mjs`.
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Container  from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller from './MainViewController.mjs';
 import ViewModel  from './MainViewModel.mjs';
@@ -78,7 +78,7 @@ you see how a component is configured let's put a button in the container.
 First, we need to import the class that defines buttons. Then we'll describe the new button in the
 `items:[].`
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Button     from '../../../node_modules/neo.mjs/src/button/Base.mjs';
 import Container  from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller from './MainViewController.mjs';
@@ -120,7 +120,7 @@ Here's a simplified running example. The `model` and `controller` are omitted, b
 actually used in the example, and the import root path is different to reflect the location of the 
 Neo.mjs library relative to the examples.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 

package/resources/data/deck/learnneo/pages/guides/ComponentsAndContainers.md

@@ -25,7 +25,7 @@ primitive. Components introduce various properties, such as `width`, `height`, `
 
 Here's a container, with one child item.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -47,7 +47,7 @@ MainView = Neo.setupClass(MainView);
 Components also have an `html`. The `html` property is rarely used, and goes against the abstract philosophy of Neo.mjs, but
 sometimes it's handy as a placeholder as you stub out views.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -77,7 +77,7 @@ some commonly-used layouts.
 
 Fix is used when there's a single child. The component is sized to fit the container.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -98,7 +98,7 @@ MainView = Neo.setupClass(MainView);
 
 With `vbox` and `hbox`, items are arranged vertically or horizontally.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -125,7 +125,7 @@ MainView = Neo.setupClass(MainView);
 
 A card container has multiple child items, one of which is visible. 
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -177,7 +177,7 @@ MainView = Neo.setupClass(MainView);
 Neo.mjs is class-based, and thus, any component or container can be defined as its own class, and reused like any
 other component in the framework.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button from '../button/Base.mjs';
 // In practice this would be some handy reusable component
 class MySpecialButton extends Button {

package/resources/data/deck/learnneo/pages/guides/CustomComponents.md

@@ -9,7 +9,7 @@ Neo.mjs is class-based, which means you're free to extend any component (or any
 
 ## Lifecycle config properties
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button from '../button/Base.mjs';
 // In practice this would be some handy reusable component
 class MySpecialButton extends Button {

package/resources/data/deck/learnneo/pages/guides/MainThreadAddonIntro.md

@@ -18,7 +18,7 @@ please return a specified `window` property." Neo.mjs
 lets you do that via `Neo.Main.getByPath()`. For
 example, the following statement logs the URL query string.
 
-<pre data-javascript>
+<pre data-code-readonly>
 const search = await Neo.Main.getByPath({path: 'window.location.search'});
 console.log(search); // Logs the search string
 </pre>

package/resources/data/deck/learnneo/pages/guides/StateProviders.md

@@ -10,7 +10,7 @@ Other libraries or frameworks often call state providers "Stores".
 
 ## Inline State Providers
 ### Direct Bindings
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 import Label     from '../component/Label.mjs';
@@ -58,7 +58,7 @@ We can easily bind 1:1 to specific data props using the following syntax:</br>
 `bind: {text: data => data.hello}`
 
 ### Bindings with multiple data props
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 import Label     from '../component/Label.mjs';
@@ -128,7 +128,7 @@ data.component equals to the Button instance itself. Since the Button instance d
 `getStateProvider()` will return the closest stateProvider inside the parent chain.
 
 ### Nested Inline State Providers
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 import Label     from '../component/Label.mjs';
@@ -203,7 +203,7 @@ We can even change data props which live inside different stateProviders at once
 Hint: Modify the example code (Button handler) to try it out right away!
 
 ### Nested Data Properties
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 import Label     from '../component/Label.mjs';
@@ -262,7 +262,7 @@ Or we can directly pass the object containing the change(s):</br>
 Hint: This will not override left out nested data props (lastname in this case).
 
 ### Dialog connecting to a Container
-<pre data-neo>
+<pre data-code-livepreview>
 import Controller from '../controller/Component.mjs';
 import Dialog     from '../dialog/Base.mjs';
 import Panel      from '../container/Panel.mjs';
@@ -384,7 +384,7 @@ MainView = Neo.setupClass(MainView);
 When your stateProviders contain many data props or need custom logic, you can easily move them into their own classes.
 
 ### Direct Bindings
-<pre data-neo>
+<pre data-code-livepreview>
 import Button        from '../button/Base.mjs';
 import Container     from '../container/Base.mjs';
 import Label         from '../component/Label.mjs';

package/resources/data/deck/learnneo/pages/guides/events/CustomEvents.md

@@ -1,7 +1,7 @@
 As you read in the <a href="#/learn/Events">Getting Started > Events</a> topic, components, stores, and many other objects fire events.
 
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';
 
@@ -35,7 +35,7 @@ MainView = Neo.setupClass(MainView);
 The event listener function can be coded in-line. Normally you want event handlers to be in a view's 
 controller, but for very simple situation it can be convenient to use this syntax.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';
 
@@ -62,7 +62,7 @@ You can also use the `up.` qualifier to specify a method in the component's pare
 in-line syntax you saw above, using the `up.` syntax might be convenient for simple classees, 
 or when you simply haven't gotten around to defining a view's controller.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';
 
@@ -92,7 +92,7 @@ Despite the examples above, the most correct way of setting up event handlers is
 Any view class can specify a controller &mdash; wWhen the view is created a controller instance is
 also created. 
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Controller from '../controller/Component.mjs';
 
 class MainViewController extends Controller {
@@ -134,7 +134,7 @@ a listener procedurally.
 
 Any observable class has an `addListener` method, along with an easier-to-type version called `on`.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Controller from '../controller/Component.mjs';
 
 class MainViewController extends Controller {
@@ -171,7 +171,7 @@ MainView = Neo.setupClass(MainView);
 
 The method specified in `on()` doesn't have to be an arrow function; you can use a controller function.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Controller from '../controller/Component.mjs';
 
 class MainViewController extends Controller {
@@ -241,7 +241,7 @@ will automatically be reflected in the view model.
 To contrast syntax, and to illustrate the simplicity of a binding, let's look at two exmaples of updating a component
 to reflect the value of a text field. THe first example uses events; the second uses bindings.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';
@@ -279,7 +279,7 @@ class MainView extends Container {
 MainView = Neo.setupClass(MainView);
 </pre>
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';