:compile

yysun · Aug 18, 2024 · 2370588 · 2370588
1 parent b4dd39d
commit 2370588
Show file tree

Hide file tree

Showing 24 changed files with 236 additions and 71 deletions.
diff --git a/README.md b/README.md
@@ -3,20 +3,20 @@
 
 ## Introduction
 
-AppRun is a lightweight alternative to other frameworks and libraries. It has a unique architecture inspired by the Elm architecture that can help you manage states, routing, and other essential aspects of your web application.
+AppRun is a lightweight alternative to other frameworks and libraries. It has a [unique architecture](https://apprun.js.org/docs/architecture/) inspired by the Elm architecture that can help you manage states, routing, and other essential aspects of your web application.
 
 Use a _Counter_ as an example.
 
 ```js
 // define the initial state
 const state = 0;
 
-// view is a function to display the state
-const view = state => `<div>
-  <h1>${state}</h1>
+// view is a function to display the state (JSX)
+const view = state => <div>
+  <h1>{state}</h1>
   <button onclick="app.run('-1')">-1</button>
   <button onclick="app.run('+1')">+1</button>
-</div>`;
+</div>;
 
 // update is a collection of event handlers
 const update = {
@@ -27,16 +27,15 @@ const update = {
 // start the app
 app.start(document.body, state, view, update);
 ```
-<apprun-code style="font-size: smaller"></apprun-code>
+<apprun-code></apprun-code>
 
-At its core, AppRun harnesses the power of the event PubsSub (Publish-Subscribe) pattern to streamline your application’s state handling.
+* AppRun is lightweight, only 6KB gzipped, but includes state management, rendering, event handling, and routing.
 
+* With only three functions: `app.start`, `app.run`, and `app.on` in its API makes it easy to learn and use. And no worries about the incompatibility of version upgrades.
 
-## Why the Event Pubsub Pattern
+* One more thing, you can [use AppRun with React](https://apprun.js.org/docs/react) to simplify state management and routing of your React applications.
 
-The event PubSub pattern isn't new; it's a well-established design pattern used widely in software development to handle communication between components or services in a decoupled manner. Web developers are likely already familiar with the PubSub pattern through their use of DOM event handling.
-
-AppRun takes the familiar PubSub concept and extends it into your application's logic, providing a more structured and powerful approach to state management. The result? Cleaner, more maintainable code and a smoother development experience.
+At its core, AppRun harnesses the power of the [event PubsSub]([Publish-Subscribe](https://apprun.js.org/docs/event-pubsub/)) pattern to streamline your application’s state handling and routing. The result? Cleaner, more maintainable code and a smoother development experience.
 
 ## AppRun Benefits
 
@@ -54,7 +53,6 @@ AppRun is distributed on npm. To get it, run:
 ```sh
 npm install apprun
 ```
-
 You can also load AppRun directly from the unpkg.com CDN:
 
 ```js
@@ -68,23 +66,25 @@ You can also load AppRun directly from the unpkg.com CDN:
 </body>
 </html>
 ```
-<apprun-code style="font-size: smaller"></apprun-code>
+<apprun-code style="height:200px"></apprun-code>
 
 Or, use the ESM version:
 ```js
 <html>
 <body>
 <script type="module">
-  import { app } from 'https://unpkg.com/apprun/dist/apprun-html.esm.js';
-  const view = state => `<div>${state}</div>`;
+  import { app, html } from 'https://unpkg.com/apprun/dist/apprun-html.esm.js';
+  const view = state => html`<div>${state}</div>`;
   app.start(document.body, 'hello ESM', view);
 </script>
 </body>
 </html>
 ```
-<apprun-code style="font-size: smaller"></apprun-code>
+<apprun-code style="height:200px"></apprun-code>
+
+In addition to run directly in the browser,  or with a compiler/bundler like Webpack or Vite.
 
-Or, you can create an AppRun app by using the `npm create apprun-app` command.
+You can run the `npm create apprun-app` command to create an AppRun project.
 
 ```sh
 npm create apprun-app [my-app]

diff --git a/demo/app.js b/demo/app.js
diff --git a/demo/app.js.LICENSE.txt b/demo/app.js.LICENSE.txt
@@ -1,3 +1,5 @@
+/*! js-yaml 4.1.0 https://github.com/nodeca/js-yaml @license MIT */
+
 /**
  * @license
  * Copyright 2017 Google LLC

diff --git a/demo/app.js.map b/demo/app.js.map
diff --git a/demo/apprun-code.js b/demo/apprun-code.js
diff --git a/demo/home.html b/demo/home.html
@@ -1,16 +1,16 @@
 <h1>AppRun <a href="https://travis-ci.org/yysun/apprun"><img src="https://travis-ci.org/yysun/apprun.svg?branch=master" alt="Build"></a> <a href="https://npmjs.org/package/apprun"><img src="https://img.shields.io/npm/v/apprun.svg" alt="NPM version"></a> <a href="https://npmjs.org/package/apprun"><img src="https://img.shields.io/npm/dm/apprun.svg" alt="Downloads"></a> <a href="LICENSE.md"><img src="https://img.shields.io/:license-mit-blue.svg" alt="License"></a> <a href="https://twitter.com/intent/tweet?text=Check%20out%20AppRun%20by%20%40yysun%20https%3A%2F%2Fgithub.com%2Fyysun%2Fapprun%20%F0%9F%91%8D%20%40apprunjs"><img src="https://img.shields.io/twitter/url/https/github.com/yysun/apprun.svg?style=social" alt="twitter"></a> <a href="https://discord.gg/CETyUdx"><img src="https://img.shields.io/discord/476903999023480842.svg" alt="Discord Chat"></a></h1>
 <h2>Introduction</h2>
-<p>AppRun is a lightweight alternative to other frameworks and libraries. It has a unique architecture inspired by the Elm architecture that can help you manage states, routing, and other essential aspects of your web application.</p>
+<p>AppRun is a lightweight alternative to other frameworks and libraries. It has a <a href="https://apprun.js.org/docs/architecture/">unique architecture</a> inspired by the Elm architecture that can help you manage states, routing, and other essential aspects of your web application.</p>
 <p>Use a <em>Counter</em> as an example.</p>
 <pre><code class="language-js">// define the initial state
 const state = 0;
 
-// view is a function to display the state
-const view = state =&gt; `&lt;div&gt;
-  &lt;h1&gt;${state}&lt;/h1&gt;
+// view is a function to display the state (JSX)
+const view = state =&gt; &lt;div&gt;
+  &lt;h1&gt;{state}&lt;/h1&gt;
   &lt;button onclick=&quot;app.run(&#39;-1&#39;)&quot;&gt;-1&lt;/button&gt;
   &lt;button onclick=&quot;app.run(&#39;+1&#39;)&quot;&gt;+1&lt;/button&gt;
-&lt;/div&gt;`;
+&lt;/div&gt;;
 
 // update is a collection of event handlers
 const update = {
@@ -21,11 +21,16 @@ <h2>Introduction</h2>
 // start the app
 app.start(document.body, state, view, update);
 </code></pre>
-<p><apprun-code style="font-size: smaller"></apprun-code></p>
-<p>At its core, AppRun harnesses the power of the event PubsSub (Publish-Subscribe) pattern to streamline your application’s state handling.</p>
-<h2>Why the Event Pubsub Pattern</h2>
-<p>The event PubSub pattern isn&#39;t new; it&#39;s a well-established design pattern used widely in software development to handle communication between components or services in a decoupled manner. Web developers are likely already familiar with the PubSub pattern through their use of DOM event handling.</p>
-<p>AppRun takes the familiar PubSub concept and extends it into your application&#39;s logic, providing a more structured and powerful approach to state management. The result? Cleaner, more maintainable code and a smoother development experience.</p>
+<p><apprun-code></apprun-code></p>
+<ul>
+<li><p>AppRun is lightweight, only 6KB gzipped, but includes state management, rendering, event handling, and routing.</p>
+</li>
+<li><p>With only three functions: <code>app.start</code>, <code>app.run</code>, and <code>app.on</code> in its API makes it easy to learn and use. And no worries about the incompatibility of version upgrades.</p>
+</li>
+<li><p>One more thing, you can <a href="https://apprun.js.org/docs/react">use AppRun with React</a> to simplify state management and routing of your React applications.</p>
+</li>
+</ul>
+<p>At its core, AppRun harnesses the power of the <a href="%5BPublish-Subscribe%5D(https://apprun.js.org/docs/event-pubsub/)">event PubsSub</a> pattern to streamline your application’s state handling and routing. The result? Cleaner, more maintainable code and a smoother development experience.</p>
 <h2>AppRun Benefits</h2>
 <ul>
 <li>Clean architecture that needs less code</li>
@@ -49,20 +54,21 @@ <h2>Getting Started</h2>
 &lt;/body&gt;
 &lt;/html&gt;
 </code></pre>
-<p><apprun-code style="font-size: smaller"></apprun-code></p>
+<p><apprun-code style="height:200px"></apprun-code></p>
 <p>Or, use the ESM version:</p>
 <pre><code class="language-js">&lt;html&gt;
 &lt;body&gt;
 &lt;script type=&quot;module&quot;&gt;
-  import { app } from &#39;https://unpkg.com/apprun/dist/apprun-html.esm.js&#39;;
-  const view = state =&gt; `&lt;div&gt;${state}&lt;/div&gt;`;
+  import { app, html } from &#39;https://unpkg.com/apprun/dist/apprun-html.esm.js&#39;;
+  const view = state =&gt; html`&lt;div&gt;${state}&lt;/div&gt;`;
   app.start(document.body, &#39;hello ESM&#39;, view);
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;
 </code></pre>
-<p><apprun-code style="font-size: smaller"></apprun-code></p>
-<p>Or, you can create an AppRun app by using the <code>npm create apprun-app</code> command.</p>
+<p><apprun-code style="height:200px"></apprun-code></p>
+<p>In addition to run directly in the browser,  or with a compiler/bundler like Webpack or Vite.</p>
+<p>You can run the <code>npm create apprun-app</code> command to create an AppRun project.</p>
 <pre><code class="language-sh">npm create apprun-app [my-app]
 </code></pre>
 <h3>Learn More</h3>

diff --git a/dist/apprun-dev-tools.js b/dist/apprun-dev-tools.js
diff --git a/dist/apprun-dev-tools.js.LICENSE.txt b/dist/apprun-dev-tools.js.LICENSE.txt
@@ -1,13 +1 @@
-/**
- * @license
- * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */
+/*! js-yaml 4.1.0 https://github.com/nodeca/js-yaml @license MIT */
diff --git a/dist/apprun-dev-tools.js.map b/dist/apprun-dev-tools.js.map
diff --git a/dist/apprun-html.esm.js b/dist/apprun-html.esm.js
diff --git a/dist/apprun-html.esm.js.map b/dist/apprun-html.esm.js.map
diff --git a/dist/apprun-html.js b/dist/apprun-html.js
diff --git a/dist/apprun-html.js.map b/dist/apprun-html.js.map