neo.mjs 6.9.6 → 6.9.8

package/resources/data/learnneo/p/2023-10-08T20-20-37-336Z.md

@@ -0,0 +1,29 @@
+Neo.mjs uses standard modular JavaScript, so you're free to use other class 
+features, like private members.
+<pre class="neo">
+class Human extends Mammal {
+    static config = {
+        className: 'Simple.example.Human',
+        name: 'J. Doe',
+        married: false,
+    }
+    static #privateStaticField = 'foo'
+    #privateInstanceField = 'bar'
+    #privateInstanceMethod(){
+        console.log(`Psst. Don't tell anyone, but ${this.#privateInstanceField} and ${Human.#privateStaticField}`);
+    }
+    speak(tellSecret){
+        console.log(`Hello! My name is ${this.name}. I am ${this.married?'':'not'} married.`);
+        if (tellSecret) this.#privateInstanceMethod();
+    }
+    yodel(){
+        console.log('Yodelay hee hoo!');
+    }}
+
+const myPerson = Neo.create(Human, {
+    name: 'Herbert'
+});
+myPerson.speak(true);
+
+Neo.applyClassConfig(Human);
+</pre>

package/resources/data/learnneo/p/2023-10-08T21-58-25-809Z.md

@@ -0,0 +1,68 @@
+To call a super-class method use the `super` keyword.
+
+<pre class="neo" style="color:gray">
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        name: 'Anonymous'
+    }
+    doSomething(){
+        console.log(`${this.name} is doing something mammals do`)
+    }
+}
+Neo.applyClassConfig(Mammal);
+</pre>
+<pre class="neo" style="color:gray">
+class Human extends Mammal {
+    static config = {
+        className: 'Simple.example.Human',
+    }
+    doSomething(){
+        <span style="color:#b91010">super.doSomething();</span>
+        console.log(`${this.name} is doing something humans do`)
+    }
+}
+
+const myPerson = Neo.create(Human, {
+    name: 'Herbert'
+});
+myPerson.doSomething();
+
+Neo.applyClassConfig(Mammal);
+</pre>
+
+Sometimes you aren't sure if a super class has a method. In that case use the
+conditional chaining operator &mdash; `?.`
+
+<pre class="neo" style="color:gray">
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        name: 'Anonymous'
+    }
+    doSomething(){
+        console.log(`${this.name} is doing something mammals do`)
+    }
+}
+Neo.applyClassConfig(Mammal);
+</pre>
+<pre class="neo" style="color:gray">
+class Human extends Mammal {
+    static config = {
+        className: 'Simple.example.Human',
+    }
+    doSomething(){
+        <span style="color:#b91010">super?.doSomething();</span>
+        console.log(`${this.name} is doing something humans do`)
+    }
+}
+
+const myPerson = Neo.create(Human, {
+    name: 'Herbert'
+});
+myPerson.doSomething();
+
+Neo.applyClassConfig(Mammal);
+</pre>

package/resources/data/learnneo/p/2023-10-14T19-25-08-153Z.md

@@ -0,0 +1,124 @@
+The purpose of this tutorial is to let you see the structure of a Neo.mjs workspace,
+and the strucure of an application.
+
+If you haven't already done it, run `npx neo-app` to create a Neo.mjs workspace.
+
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/learnneo/NeoWorkspace.png" style="height: 400px;">
+
+As you can see, a Neo.mjs workspace is a conventional npm workspace. If you run 
+the script `npm run server-start` from the workspace, Neo.mjs launches a web
+serve whose doc root is the workspace. 
+
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/learnneo/ServerRoot.png" style="height: 400px;">
+
+If you drill down into the `src` directory you'll see your applications.
+If you drill down into the `docs` directory you'll see the Neo.mjs API docs.
+
+In order to discuss the structure of an app, we'll create a simple starter 
+app. To do that, run this command from the workspace.
+
+`npm run create-app-empty`
+
+At the first prompt, name the app `Foo`, and accept the default for everything else.
+The script creates an application structured as follows.
+
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/learnneo/FooFolder.png" style="height: 400px;">
+
+These files are part of the typical structure of a Neo.mjs application. The files `index.html`, `app.mjs`, `neo-config.json`, `view/Viewport.mjs` are rarely modified.
+You will, however, edit the main container, and its associated "controller" and "model",
+as well as create new views, new controllers, etc. 
+
+Now let's look at a source file. This is the contents of `MainView.mjs`.
+
+<pre>
+<code class="javascript">
+import Base       from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Controller from './MainViewController.mjs';
+import ViewModel  from './MainViewModel.mjs';
+
+class MainView extends Base {
+    static config = {
+        className: 'Foo.view.MainView',
+        
+        controller: {module: Controller},
+        model: {module: ViewModel},
+
+        layout: {ntype: 'fit'},
+        items: [],
+    }
+}
+
+Neo.applyClassConfig(MainView);
+
+export default MainView;
+</code>
+</pre>
+
+Neo.mjs views are composed of components. A component can be a "container", which means it
+visually holds or groups other components, or a regular component, like a button. The main
+view is a container, which you can see because `MainView extends Base`, and `Base` is 
+the container base class. The items in a container are configured in the `items:[]`, which
+is empty in this starter code.
+
+This view also has a "controller" and "model". We'll talk about those later, but in a nutshell,
+a controller is where event handling and app logic goes, and a model is where you set up shared
+bindable data.
+
+We'll go into a lot more depth about view, controllers, and models in other topics, but to let
+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>
+<code class="javascript">
+import Base       from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Controller from './MainViewController.mjs';
+import ViewModel  from './MainViewModel.mjs';
+import Button     from '../../../node_modules/neo.mjs/src/button/Base.mjs';
+
+class MainView extends Base {
+    static config = {
+        className: 'Foo.view.MainView',
+        
+        controller: {module: Controller},
+        model: {module: ViewModel},
+
+        layout: {ntype: 'fit'},
+        items: [{
+            module: Button,
+            text: 'Button'
+        }],
+    }
+}
+
+Neo.applyClassConfig(MainView);
+
+export default MainView;
+</code>
+</pre>
+
+Note the entry in +items:[]+. That's a description of the button that'll be created as the single
+item in our container. In Neo.mjs terms we're _configuring_ the button. Neo.mjs is _declarative_,
+which components and objects are _described_. It's an abstraction. In other words we're saying 
+what we want, but not how it's done. We want a button with some text &mdash; how that's done
+isn't important here in the container. A non-declarative approach would be more focused on _how_,
+where you might way "I want a &lt;button> HTML element with its innerHTML set to some value." 
+
+In another topic you'll learn about the Neo.mjs config system and declaratively describing
+views, controllers, and other things.
+
+If you run the +foo+ app you'll see one huge button. That's because the container is configured to 
+use the "fit" layout, which means the container is designed to hold one and only one component,
+and that component will take up all available space. We could get a more normal looking button
+by changing the layout.
+
+`layout: {type:'vbox', align:'start},`
+
+Change that line and look at the running application. 
+
+Neo.mjs has scores of component classes.
+You can extend them to create your own reusable components and sets of components.
+
+Other topics discuss coding applications, how the config system works, controllers,
+and bindable data. However, as long as we're here

package/resources/data/learnneo/pages/whyneo.md

@@ -1,3 +1,7 @@
+
+#hi
+
+
 Neo.mjs is a framework used to create browser-based applications.
 
 Some key features and benefits of Neo.mjs are:

package/resources/data/learnneo/t.json

@@ -0,0 +1,130 @@
+{
+    "data": [
+        {
+            "id": "2023-10-01T18-29-19-158Z",
+            "parentId": null,
+            "isLeaf": true,
+            "name": "Why Neo.mjs?"
+        },
+        {
+            "id": "2023-09-26T17-26-15-104Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Getting Started"
+        },
+        {
+            "id": "2023-10-12T12-59-22-082Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Source Files"
+        },
+        {
+            "id": "2023-10-14T19-25-08-153Z",
+            "parentId": "2023-10-12T12-59-22-082Z",
+            "isLeaf": true,
+            "name": "Neo.mjs workspaces"
+        },
+        {
+            "id": "2023-10-08T18-26-31-357Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Class Definitions and Config"
+        },
+        {
+            "id": "2023-10-08T20-39-23-708Z",
+            "parentId": "2023-10-08T18-26-31-357Z",
+            "isLeaf": false,
+            "name": "Class Basics"
+        },
+        {
+            "id": "2023-10-07T19-18-28-517Z",
+            "parentId": "2023-10-08T20-39-23-708Z",
+            "isLeaf": true,
+            "name": "Classes, Properties, and Methods"
+        },
+        {
+            "id": "2023-10-08T20-20-07-934Z",
+            "parentId": "2023-10-08T20-39-23-708Z",
+            "isLeaf": true,
+            "name": "Overriding Methods"
+        },
+        {
+            "id": "2023-10-08T20-20-37-336Z",
+            "parentId": "2023-10-08T20-39-23-708Z",
+            "isLeaf": true,
+            "name": "Other JavaScript Class Features"
+        },
+        {
+            "id": "2023-10-08T21-58-25-809Z",
+            "parentId": "2023-10-08T20-39-23-708Z",
+            "isLeaf": true,
+            "name": "Super"
+        },
+        {
+            "id": "2023-10-08T20-37-30-658Z",
+            "parentId": "2023-10-08T18-26-31-357Z",
+            "isLeaf": true,
+            "name": "The Constructor"
+        },
+        {
+            "id": "2023-10-08T22-22-11-013Z",
+            "parentId": "2023-10-08T18-26-31-357Z",
+            "isLeaf": true,
+            "name": "super"
+        },
+        {
+            "id": "2023-09-25T20-27-55-600Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Config"
+        },
+        {
+            "id": "2023-09-25T20-27-38-129Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Component Basics"
+        },
+        {
+            "id": "2023-09-25T20-28-12-355Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "User Input (Forms)"
+        },
+        {
+            "id": "2023-09-25T20-28-33-035Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Data"
+        },
+        {
+            "id": "2023-09-25T20-28-51-807Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Component Models and Binding"
+        },
+        {
+            "id": "2023-09-25T20-29-19-770Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Multi-Window"
+        },
+        {
+            "id": "2023-09-25T20-29-28-307Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Main Thread Add-onss"
+        },
+        {
+            "id": "2023-09-26T17-31-48-754Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Custom Components and vdom"
+        },
+        {
+            "id": "2023-10-16T19-38-29-590Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Mixins"
+        }
+    ]
+}

package/resources/data/learnneo/tree.json

@@ -0,0 +1,27 @@
+{
+    "data": [{
+        "id"      : 1,
+        "isLeaf"  : true,
+        "name"    : "Why neo.mjs",
+        "parentId": null,
+        "path"    : "whyneo.md"
+    }, {
+        "id"      : 2,
+        "isLeaf"  : false,
+        "name"    : "Class Definitions and Config",
+        "parentId": null,
+        "path"    : null
+    }, {
+        "id"      : 3,
+        "isLeaf"  : false,
+        "name"    : "Class Basics",
+        "parentId": 2,
+        "path"    : null
+    }, {
+        "id"      : 4,
+        "isLeaf"  : true,
+        "name"    : "Classes, Properties, and Methods",
+        "parentId": 3,
+        "path"    : null
+    }]
+}

package/resources/deck/whyneo.md

@@ -0,0 +1,80 @@
+
+#hi
+
+
+Neo.mjs is a framework used to create browser-based applications.
+
+Some key features and benefits of Neo.mjs are:
+
+<div type="expander" caption="Multi-Threaded">
+<p>
+When a Neo.mjs application starts, the framework spawns three web-workers. 
+Web-workers are each run in their own thread. As a result, a typical Neo.mjs application
+has four threads:
+<ol>
+<li>The _main_ thread, where DOM updates are applied
+<li>An _application_ web-worker where normal application locic is run
+    <li>A _data_ web-worker were HTTP and socket calls are run
+<li>A _view_ web-worker that manages delta updates
+</ol>
+</div>
+
+<div type="expander" caption="Extreme Speed">
+<p>
+The Neo.mjs web-worker proccesses 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.
+</p>
+<p>
+This means Neo.mjs applications run and render faster. This is 
+particularly beneficial for processor- and data-intensive applications, 
+and applications that need to rapidly update what's viewed. In testing, Neo.mjs applications 
+easily apply over 20,000 DOM updates per second. 
+</p>
+<p>
+If the default four threads aren't enough, you're free to launch additional web-worker threads 
+to run other specialized logic. 
+</p>
+</div>
+
+<div type="expander" caption="Quick Application Development">
+<p>
+Neo.js 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 
+property will automatically be applied to both components.
+</p>
+</div>
+
+<div type="expander" caption="Multi-Window Applications">
+<p>
+Neo.mjs applications can also launch as _shared web workers_, which allows you to have a single 
+application run in multiple browser windows; those windows could be moved to multiple monitors.
+</p>
+<p>
+For example, you can have a data analysis application with a control panel on one monitor, 
+tabular data in another, and charts on another &mdash; all sharing the same data, handling events
+across windows, running seamlessly as a single application. 
+</p>
+</div>
+
+<div type="expander" caption="Open-Source and Standards-Based">
+<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, 
+all Neo.mjs classes can be extended.
+</p>
+<p>
+Neo.mjs uses standard modular JavaScript, so developers don't need to learn non-standard language
+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.
+</p>
+</div>

package/resources/images/Neo_Vector.svg

@@ -0,0 +1,3 @@
+<svg width="274" height="178" viewBox="0 0 274 178" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M231.866 178L136.597 82.5858L41.3368 178L0.101562 136.702L136.597 0L273.102 136.702L231.866 178Z" fill="#11F4A1"/>
+</svg>

package/resources/scss/src/apps/learnneo/Viewport.scss

@@ -0,0 +1,63 @@
+.learn-content {
+
+    font-size: 13pt;
+    letter-spacing: 1px;
+
+    em,
+    i {
+        font-family: Palatino, "Times New Roman", serif;
+        font-size: 1.07em;
+    }
+
+    p {
+        margin: 0.5em 0em 0.7em 0em ;
+    }
+
+    mark {
+        background-color: #B8FCE3;
+        color: black;
+        padding: 0.1em 0.2em;
+    }
+
+    padding: 1em;
+
+    overflow: scroll;
+
+    details summary {
+        cursor: pointer;
+        transition: margin 300ms ease-out;
+    }
+
+    details[open] {
+        margin-bottom: 2em;
+    }
+
+    details summary {
+        list-style: none;
+        color: #555;
+        display: flex;
+        /* also removes the list marker */
+        align-items: center;
+        font-weight: bold;
+    }
+
+    details summary::before {
+        content: "\f055";
+    }
+
+    details[open] summary::before {
+        content: "\f056";
+    }
+
+    details summary::before {
+        font-family: var(--fa-style-family, "Font Awesome 6 Free");
+        font-weight: var(--fa-style, 900);
+        font-size: 1.3em;
+        margin: 0.4em 0.4em 0.4em 0;
+        color: #c4c4c4;
+    }
+
+    summary::-webkit-details-marker {
+        display: none;
+    }
+}

package/resources/scss/src/apps/newwebsite/MainContainer.css

@@ -0,0 +1,33 @@
+
+.newwebsite-main-container {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 48px;
+    padding: 10% 15% 15% 15%;
+}
+
+.button-group {
+    display: flex !important;
+    flex-direction: row-reverse !important;
+    gap: 8px !important;
+}
+
+.neo-h1 {
+    font-size: 48px;
+    font-weight: 600;
+    text-align: center;
+}
+
+.vector {
+    background-image: url("../../../../images/Neo_Vector.svg");
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center center;
+    width: 100%;
+    height: 150px;
+}
+
+.get-started-button {
+    cursor: not-allowed !important;
+}

package/resources/scss/theme-neo-light/Global.scss

@@ -0,0 +1,7 @@
+:root .neo-theme-neo-light {
+    --neo-background-color: #fafafa;
+    --neo-color           : #000;
+    --neo-disabled-opacity: 0.5;
+    --neo-font-family     : "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
+    --neo-font-smoothing  : antialiased;
+}

package/resources/scss/theme-neo-light/apps/covid/HeaderContainer.scss

@@ -0,0 +1,10 @@
+:root .neo-theme-neo-light { // .covid-header-container
+    --covid-header-active-background-color   : rgba(100, 181, 246, .65);
+    --covid-header-active-color              : #{darken(#64b5f6, 20%)};
+    --covid-header-cases-background-color    : rgba(187, 187, 187, .65);
+    --covid-header-cases-color               : #{darken(#bbb, 30%)};
+    --covid-header-deaths-background-color   : rgba(251, 103, 103, .65);
+    --covid-header-deaths-color              : #{darken(#fb6767, 20%)};
+    --covid-header-recovered-background-color: rgba( 40, 218, 111, .65);
+    --covid-header-recovered-color           : #{darken(#28ca68, 20%)};
+}

package/resources/scss/theme-neo-light/apps/covid/country/Gallery.scss

@@ -0,0 +1,7 @@
+:root .neo-theme-neo-light { // .neo-gallery.covid-country-gallery
+    --covid-gallery-background-color             : #fff;
+    --covid-gallery-border-color                 : #ddd;
+    --covid-gallery-item-border-color            : rgba(73,120,184,.5);
+    --covid-gallery-item-border-sides-width      : 1px;
+    --covid-gallery-item-wrapper-background-color: rgba(73,120,184,.5);
+}

package/resources/scss/theme-neo-light/apps/covid/country/Helix.scss

@@ -0,0 +1,8 @@
+:root .neo-theme-neo-light { // .neo-helix.covid-country-helix
+    --covid-helix-background-color             : #fff;
+    --covid-helix-border-color                 : #ddd;
+    --covid-helix-item-border-color            : rgba(73,120,184,.5);
+    --covid-helix-item-border-sides-width      : 1px;
+    --covid-helix-item-box-shadow-selected     : 0 0 35px #008dff;
+    --covid-helix-item-wrapper-background-color: rgba(73,120,184,.5);
+}

package/resources/scss/theme-neo-light/apps/covid/country/LineChartComponent.scss

@@ -0,0 +1,3 @@
+:root .neo-theme-neo-light { // .covid-line-chart
+    --covid-line-chart-background-color: #fff;
+}

package/resources/scss/theme-neo-light/apps/docs/ContentTabContainer.scss

@@ -0,0 +1,4 @@
+:root .neo-theme-neo-light { // .docs-content-tabcontainer
+    --docs-content-tabcontainer-tab-header-toolbar-background-color : #fff;
+    --docs-content-tabcontainer-tab-header-toolbar-glyph-color-hover: red;
+}

package/resources/scss/theme-neo-light/apps/docs/HeaderContainer.scss

@@ -0,0 +1,10 @@
+:root .neo-theme-neo-light { // .neo-docs-header-container
+    --docs-header-container-background-color         : #fff;
+    --docs-header-container-background-image         : none;
+    --docs-header-container-logo-text-background-clip: text;
+    --docs-header-container-logo-text-color          : rgba(0,0,0,0.6);
+    --docs-header-container-logo-text-font-size      : 28px;
+    --docs-header-container-logo-text-font-weight    : 800;
+    --docs-header-container-logo-padding             : 10px;
+    --docs-header-container-logo-text-shadow         : 2px 2px 3px rgba(200,200,200,0.1);
+}

package/resources/scss/theme-neo-light/apps/docs/MainContainer.scss

@@ -0,0 +1,3 @@
+:root .neo-theme-neo-light { // .neo-docs-navigation-tab-container
+    --docs-navigation-tab-container-background-color: #fff;
+}

package/resources/scss/theme-neo-light/apps/docs/classdetails/HeaderComponent.scss

@@ -0,0 +1,4 @@
+:root .neo-theme-neo-light { // .neo-docs-classdetails-headercontainer
+    --docs-classdetails-headercomponent-background-color: #fff;
+    --docs-classdetails-headerpanel-border-right        : 1px solid #ddd;
+}

package/resources/scss/theme-neo-light/apps/docs/classdetails/MembersList.scss

@@ -0,0 +1,17 @@
+:root .neo-theme-neo-light { // .docs-classhierarchy-memberslist
+    --docs-classhierarchy-memberslist-background-color : #bbb;
+    --docs-memberlist-group-header-background-color    : steelblue;
+    --docs-memberlist-group-header-color               : #fff;
+    --docs-param-table-list-item-background-color      : #fff;
+    --docs-param-table-list-item-background-image      : none;
+    --docs-param-table-list-item-header-background-clip: none;
+    --docs-param-table-list-item-header-text-shadow    : none;
+    --docs-param-table-list-item-highlight-search-color: red;
+    --docs-param-table-source-link-color               : #bbb;
+    --docs-param-table-source-link-color-hover         : #{darken(#1c60a0, 10%)};
+    --docs-param-table-thead-background-color          : slategray;
+    --docs-param-table-thead-background-image          : none;
+    --docs-param-table-tr-background-clip              : none;
+    --docs-param-table-tr-color                        : #fff;
+    --docs-param-table-tr-text-shadow                  : none;
+}

package/resources/scss/theme-neo-light/apps/docs/classdetails/TutorialComponent.scss

@@ -0,0 +1,4 @@
+:root .neo-theme-neo-light {
+    --docs-classdetails-tutorialcomponent-background-color: #fff;
+    --docs-classdetails-tutorialcomponent-color           : #000;
+}