apprun 4.0.0 → 6.0.0-rc.0

package/CHANGELOG.md

@@ -1,26 +1,249 @@
 # Change Log
 
-## Releases
-* apprun@latet: 1.x, stable, es5
-* apprun@beta: 2.x, stable, es2015, web component
-* apprun@next: 3.x, development, es5
-* apprun@es6: 4.x, development, es2015, web component
+## V6.0.0
 
-## 3.0 next
+* Kept AppRun script-tag globals; removed legacy `React` and `_React` browser aliases
+* Removed `_html:` string-prefix rendering; use `trustedHTML()` for caller-owned trusted markup
+* Deprecated misleading `safeHTML()` naming in favor of `trustedHTML()`
+* Removed `query()` in favor of `runAsync()`
+* Added router support for `:param` and `*` patterns
+* Hardened package exports, package contents, side-effect metadata, and generated artifact hygiene
+* Made `immer` an optional peer dependency for `createState`
+* Added CI checks for lint and package dry-run validation
+
+## V3.38.0
+
+* Support for binding to nested objects and arrays with `$bind`
+* Support for type safe props and children in components
+* Use `unknown` instead of `any` for generic defaults
+
+## V3.37.3
+
+* Updated skip logic for - removed `value` property
+
+## V3.37.2
+
+* Include rule / prompt files for AI Coding Agent
+* Improved type definitions for better TypeScript support
+  - Support async function and async generator in `Action<T>` that is used in `Update<T, E>`
+  - Added `State` type to allow the initial state to be a function or an async function
+* Fixed routing basePath initialization issue - not to set basePath to location.pathname by default
+
+## V3.37.1
+
+* Make `immer` and `property-information` as dependencies
+
+## V3.37.0
+
+* Introduced `createState` helper for simplified immutable state updates using Immer [create-state-immer](#docs/done/blog-create-state-immer.md)
+* Added `addComponents` function for adding components to routes [add-components](#docs/done/blog-addcomponents-feature.md)
+* Moved the component to dev-tools
+
+
+## 3.36.1
+
+* Continue code review with AI
+* Use property-information to improve property and attribute handling
+* Performance improvements in virtual DOM handling, see [analysis reports](#docs/done/framework-reordering-comparison.md)
+* New hierarchical matching behavior, see [hierarchical routing requirements](#docs/requirements/req-hierarchical-routing.md)
+
+## 3.36.0
+
+* Code review by using Copilot and Claude Sonnet 4, see [plan-apprun-bugfixes.md](#docs/plan/plan-apprun-bugfixes.md) for details. 
+* Enhanced type definitions (apprun.d.ts) for better TypeScript support
+* Fixed minor bugs and edge cases in virtual DOM handling
+* Fixed bugs in router initialization logic
+
+## 3.35.0
+
+* Support auto use router for pretty links
+* AppRun now supports pretty links with components subscribing to route events like '/about'
+* Routing component events with pretty links
+* Fallback to hash-based routing when components subscribe to '#' or '#/'
+
+## 3.33.10
+
+* Support async generator for event handlers
+* Async generator functions can return multiple values rendered in order
+* Use lit-html V3 for apprun-html.js
+* Standalone version of AppRun using lit-html for rendering without JSX
+
+## 3.30.0
+
+* Add React-safe apprun-play-html
+* Add no-init-route flag
+* Save Rect in app in case it needs to be used in the future
+* Create custom element that extends HTMLDivElement
+* Allow require from node
+
+## 3.29.0
+
+* Resolve async state before running the event
+
+## 3.28.15
+
+* Support css selector in _mount_, _start_, and _app.render_
+
+## 3.28.12
+
+* Export safeHTML funciton
+
+## 3.28.11
+
+* Make the package type module
+
+## 3.28.10
+
+* Apply directive to _app.render_
+
+## 3.28.9
+
+* retire CLI
+
+## 3.28.8
+
+* Use lit-html@2
+
+## 3.28.3 merged into master
+
+* Replaced _morphdom_ with _lit-html_
+
+## 1.28/ 2.28 / 3.28
+
+* New app.query function that returns the returned values of all then event handlers
+  ```ts
+  app.query(name: string, ...args): Promise<any[]>;
+  ```
+* Event pattern matching
+  ```ts
+  app.on('ws:*', _ => 0); // handles all events that have name start with ws:
+  ```
+* Event context
+  ```ts
+  @on('event', {c:1})  // define the context
+  fn = ({c}) => {...}; // get the context in the handler
+
+  ```
+
+## 1.27/ 2.27 / 3.27
+
+* BREAKING CHANGES: New logic for creating stateful components
+* BREAKING CHANGES: remove props from the view function call
+* Support _as_ prop for naming the root element of components
+* Support prop _apprun-no-init_ in _body_ to skip the init route call
+* CLI: -e, --esbuild option to use esbuild instead of webpack
+* CLI: -o, --story option to generate stories for a component
+
+## 1.26/ 2.26 / 3.26
+
+* Support initial state as a function or an async function
+* Support promise returned from the _mounted_ function
+* Wait for all promises before set new state
+* Dev Tools: save debugging flag to local storage
+* Dev Tools: handle messages from redux dev tools
+* Dev Tools: improve debugging event content
+* Dev Tools: publish two debugging events for each event
+* CLI: Support the unbundled development experiences with [esm-server](https://github.com/yysun/apprun-esm-server)
+* CLI: add -e option for adding ESLint
+* CLI: use Jest preset: ts-jest
+* CLI: use jsxFactory to app.h
+
+## 1.24 / 2.25 / 3.25
+
+* Support the list attribute
+* Support webpack 5
+* Set jsxFactory to app.h for TypeScript 4
+
+## 1.24 / 2.24 / 3.24
+
+* Support the list attribute
+
+## 1.23 / 2.23 / 3.23
+
+* Support style attribute using string
+* Support element event handler using string
+* Support xlink:href in SVG
+* Add -patch-vdom-on flag on component for patching vdom before rendering
+* Add _route_ to mount options
+* Add app start options type
+* PR #90 - observable properties on web-component, thanks to @spurreiter
+* Add @on and @customElement to window
+* Export Fragment and app.h
+* Add more examples to play-ground
+* CLI installs ES2015 by default
+* fix vdom update for child svg, remove console.assert
+* Fix bug: view function called twice in create component
+
+## 1.22 / 2.22 / 3.22
+
+* Call ref attribute in JSX as a function
+* Allow event to be turned or off inside a run call
+* Allow mounted life cycle function to return state and Promise of state
+* Pass _state_ to mounted function
+* Merge dev-tools into one file: apprun-dev-tools.js
+
+
+## 1.21 / 2.21 / 3.21
+
+* Allow embedding elements in JSX
+* Use app['debug'] to turn on/off debug events and component cache
+
+## 1.20 / 2.20 / 3.20
+
+* Add . event to Component,a.k.s the refresh event
+* Add ES6 module build: apprun.esm.js (2.20+)
+* Add @customElement decorator (2.20+)
+* Store _AppRunVersions in global
+* New docs
+
+## 1.19 / 2.19
+
+* $on directive use tuple for event parameters
+* Add event type to app, component and decorators
+* Support _Update_ as array of tuple to enforce the event type
+* Set window['React']=app for using babel in browser
+* $bind to function and tuple
+
+## 1.18 / 2.18
+
+* Support JSX directives $on and $bind
+* Add $ event for custom directives
+* Change the component wrapper element from <div> to <section>
+* Fixed #57, #58
+
+## 1.17 / 2.17
+
+* Pull requests: #48, #49, #50, #52, #53, #54, #55 thanks to @phBalance, @Sebring
+* Added lifecycle function: unload (beta)
+* Add props to the wrapper div of stateful component, #57, thanks to @bo-kh
+* Pass props to view, children to mounted functions of the stateful component
+
+## 1.16 / 2.16
+
+* Support class attribute in JSX
+* Support class and className attribute for SVG
+* Support custom attribute (with kebab case/snake case)
+* Export app (non-default)
+* CLI: use src and dist folder, es6 flag
+* Fix CLI error: #45, thanks to @srlopez
+
+## 1.15
+
+* Support SVG
+* Convert kebab-case to camelCase for data- attributes
+
+## 1.14
 
 * New logic for creating stateful component
 * Add unmount function
+* Add app.off function
 * Server-side rendering
 * Don't render vnode of false
 * Add dev-tools (dist/apprun-dev-tools.js)
 
-## 2.0 beta
-
-* Make AppRun component web component
-
 ## 1.13
 
-* Add lifecyle method: mounted
+* Add lifecycle method: mounted
 * Add event 'get-components' to retrieve the stateful component cache
 
 ## 1.12
@@ -128,4 +351,4 @@
 * Event pubsub
 * Used virtual-dom, virtual-dom-html
 * Three versions: zero, jsx and html
-* Demo apps
+* Demo apps

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 Yiyi Sun
+Copyright (c) 2015-2025 Yiyi Sun
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,144 +1,238 @@
-# AppRun [![Build][travis-image]][travis-url] [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][downloads-url] [![License][license-image]][license-url] [![twitter][twitter-badge]][twitter]
+# AppRun 
 
+[![AppRun Docs](https://img.shields.io/badge/docs-website-blue.svg)](https://apprun.js.org/docs)
+[![AppRun Playground](https://img.shields.io/badge/playground-online-green.svg)](https://apprun.js.org/#play)
+[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][downloads-url] [![License][license-image]][license-url] [![twitter][twitter-badge]][twitter] [![Discord Chat][discord-image]][discord-invite]
 
-AppRun is a 3K library for building applications using the [Elm inspired Architecture](https://yysun.github.io/apprun/docs/#/?id=architecture), [event pub-sub](https://yysun.github.io/apprun/docs/#/?id=event-pubsubs) and [components](https://yysun.github.io/apprun/docs/#/?id=component).
 
-> AppRun is a MIT-licensed open source project. Please consider [support the project on Patreon](https://www.patreon.com/apprun). 👍❤️🙏
+⭐ NEW Agent Skills for AppRun: We have developed a set of AI Agent Skills to assist with AppRun development. These skills cover various aspects of building applications with AppRun, including component design, state management, routing, and testing. 
 
-## Architecture Concept
 
-Application logic is broken down into three separated parts in the AppRun architecture.
+You can install the AppRun Skills for your AI agents with the following command:
 
-* State (a.k.a. Model) — the state of your application
-* View — a function to display the state
-* Update — a collection of event handlers to update the state
+```bash
+npx skills add yysun/apprun
+```
 
-AppRun ties the three parts together and drives the applications using [event pub-sub](https://yysun.github.io/apprun/docs/#/?id=event-pubsubs).
 
-Applications built with AppRun have less line of code, smaller js file, and better performance. See a comparison from [A Real-World Comparison of Front-End Frameworks with Benchmarks (2018 update)](https://medium.freecodecamp.org/a-real-world-comparison-of-front-end-frameworks-with-benchmarks-2018-update-e5760fb4a962). You can also see the [performance results](https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html) compared to other frameworks and libraries in the [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) project.
+🚀 July 2025, We have started to improve the codebase using AI - the spec-driven flow. The requirements, implementation plan and final results are stored in the `docs` folder.
 
+## Introduction
 
-## Quick Start
+AppRun is a lightweight framework for building web apps. 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, leveraging the power of the [event publish-subscribe](https://apprun.js.org/docs/event-pubsub/) pattern.
 
-Below is a counter application using AppRun.
-```html
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Counter</title>
-</head>
-<body>
-  <script src="https://unpkg.com/apprun@latest/dist/apprun-html.js"></script>
-  <div id="my-app"></div>
-  <script>
-    const state = 0;
-    const view = state => {
-      return `<div>
-        <h1>${state}</h1>
-        <button onclick='app.run("-1")'>-1</button>
-        <button onclick='app.run("+1")'>+1</button>
-      </div>`;
-    };
-    const update = {
-      '+1': state => state + 1,
-      '-1': state => state - 1
-    };
-    app.start('my-app', state, view, update);
-  </script>
-</body>
-</html>
+## AppRun Benefits
+
+* Clean architecture that needs minimal setup and boilerplate code.
+* Decoupled architecture that is test friendly.
+* No proprietary syntax to learn (no hooks, no reducers, no signals)
+* State management and routing included
+* Use directly in the browser or with a compiler/bundler
+* Advanced features: JSX, Web Components, Dev Tools, SSR, etc.
+
+## Examples
+
+Let's use a _Counter_ as an example to demonstrate the AppRun architecture:
+
+```js
+// define the initial state
+const state = 0;
+
+// 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>;
+
+// update is a collection of event handlers
+const update = {
+  '+1': state => state + 1,
+  '-1': state => state - 1
+};
+
+// start the app
+app.start(document.body, state, view, update);
 ```
+<apprun-code></apprun-code>
 
-## Web Components
+With [directives](https://apprun.js.org/docs/directives/) syntax sugar you can write more concise code:
 
-Starting AppRun 2.0 beta, you can build applications using the [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) that are also powered with the AppRun architecture.
+```js
+// define the initial state
+const state = 0;
 
-```html
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Counter as web component</title>
-</head>
-<body>
-  <my-app id='counter'></my-app>
-  <script src="https://unpkg.com/apprun@beta/dist/apprun-html.js"></script>
-  <script>
-    class Counter extends Component {
-      constructor() {
-        super();
-        this.state = 0;
-        this.view = state => `<div>
-          <h1>${state}</h1>
-          <button onclick='counter.run("-1")'>-1</button>
-          <button onclick='counter.run("+1")'>+1</button>
-          </div>`;
-        this.update = {
-          '+1': state => state + 1,
-          '-1': state => state - 1
-        };
-      }
-    }
-    app.webComponent('my-app', Counter);
-  </script>
-</body>
-</html>
+// view is a function to display the state (JSX)
+const view = state => <div>
+  <h1>{state}</h1>
+  <button $onclick="-1">-1</button>
+  <button $onclick="+1">+1</button>
+</div>;
+
+// update is a collection of event handlers
+const update = {
+  '+1': state => state + 1,
+  '-1': state => state - 1
+};
+
+// start the app
+app.start(document.body, state, view, update);
 ```
+<apprun-code></apprun-code>
+
+Alternatively, you can invoke state update functions without events for local state updates:
+
+```js
+// define the initial state
+const state = 0;
 
-## Install
+// state update function
+const add = (state, value) => state + value;
 
-You can include AppRun in your html.
-```javascript
-<script src="https://unpkg.com/apprun@latest/dist/apprun-html.js"></script>
+// view is a function to display the state (JSX)
+const view = state => <div>
+  <h1>{state}</h1>
+  <button $onclick={[add, -1]}>-1</button>
+  <button $onclick={[add, 1]}>+1</button>
+</div>;
+
+// start the app
+app.start(document.body, state, view);
+```
+<apprun-code></apprun-code>
+
+
+One cool feature of AppRun is that you can use async generator functions for event handlers to return multiple values. AppRun will render each value in the order they are generated.
+
+```js
+const state = {};
+const view = state => html`
+  <div><button @click=${run(getComic)}>fetch ...</button></div>
+  ${state.loading && html`<div>loading ... </div>`}
+  ${state.comic && html`<img src=${state.comic.img} />`}
+`;
+async function* getComic() {  // async generator function returns loading flag and then the comic object
+  yield { loading: true };
+  const response = await fetch('https://xkcd-api.netlify.app');
+  const comic = await response.json();
+  yield { comic };
+}
+
+app.start(document.body, state, view);
 ```
-See Examples Online @ [glitch.com](https://glitch.com/@yysun)
+<apprun-code></apprun-code>
+
+And, of course, you can use Components to encapsulate the logic blocks, e.g., SPA pages. Each component can have its own state, view, and update functions. Each component has its own handlers to handle the routing events. AppRun routes `/<path>`, `#<path>`, and `#/<path>` URLs to components. AppRun also does this with [hierarchical routing](docs/requirements/req-hierarchical-routing.md).
+
+```js
+class Home extends Component {
+  view = () => <div>Home</div>;
+  update = {'/, /home': state => state };
+}
+
+class Contact extends Component {
+  view = () => <div>Contact</div>;
+  update = {'/contact': state => state };
+}
+
+class About extends Component {
+  view = () => <div>About</div>;
+  update = {'/about': state => state };
+}
+
+const App = () => <>
+  <div id="menus">
+    <a href="/home">Home</a>{' | '}
+    <a href="/contact">Contact</a>{' | '}
+    <a href="/about">About</a></div>
+  <div id="pages"></div>
+</>
+
+app.render(document.body, <App />);
+[About, Contact, Home].map(C => new C().start('pages'));
+```
+<apprun-code></apprun-code>
 
 
-Or, you can install the AppRun CLI and initialize a TypeScript and webpack configured project:
-```sh
-npx apprun --init --spa
-npm start
+Finally, you can use AppRun with [React](https://reactjs.org/). The `app.use_react` function allows you to use React for rendering the view.
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { app } from 'apprun';
+app.use_react(React, ReactDOM);
 ```
 
-See Examples Online @ [stackblitz.com](https://stackblitz.com/@yysun)
+The `app.use_render` function allows you to use a other render library for rendering the view. Enjoy the rich ecosystem of React.
 
-## Documenttion
+```js
+import { render } from 'preact'
+import { app } from 'apprun';
+app.use_render(render);
+```
 
-To explore more about AppRun, read the following.
+There are many more examples and interactive demos available in [the AppRun Playground](https://apprun.js.org/#play).
 
-* [Architecture](https://yysun.github.io/apprun/docs/#/?id=architecture)
-* [Event Pub and Sub](https://yysun.github.io/apprun/docs/#/?id=event-pubsubs)
-* [State Management](https://yysun.github.io/apprun/docs/#/?id=state-management)
-* [Virtual DOM](https://yysun.github.io/apprun/docs/#/?id=virtual-dom)
-* [Component](https://yysun.github.io/apprun/docs/#/?id=component)
-* [Routing](https://yysun.github.io/apprun/docs/#/?id=routing)
-* [CLI](https://yysun.github.io/apprun/docs/#/?id=cli)
 
-## Video Tutorials
+## Getting Started
 
-* [Building Applications with AppRun, Part 1 - Getting Started](https://www.youtube.com/watch?v=RuRmXEN2-xI)
-* [Building Applications with AppRun, Part 2 - Components](https://www.youtube.com/watch?v=qkP6HvZmhtY)
+AppRun is distributed on npm. To get it, run:
 
-## Articles
+```sh
+npm install apprun
+```
 
-* [Building Applications with AppRun](https://medium.com/@yiyisun/building-applications-with-apprun-d103cd461bae)
-* [Deep Dive into AppRun State](https://medium.com/@yiyisun/deep-dive-into-apprun-state-3d6fb58b1521)
-* [Deep Dive into AppRun Events](https://medium.com/@yiyisun/deep-dive-into-apprun-events-1650dc7811ea)
+When you want to do a rapid prototyping or demo, you can use AppRun directly in the browser without JSX or any build step. The `app`, `Component`, `on`, `customElement`, `trustedHTML`, `safeHTML`, `html`, `run`, and `svg` APIs are available globally in the script-tag build. The `html` and `svg` functions are lit templates. The `run` function is equivalent to the `$on` directive and invokes state update functions.
 
+```js
+<html>
+<body>
+<script src="https://unpkg.com/apprun/dist/apprun-html.js"></script>
+<script>
+  const add = (state, delta) => state + delta;
+  const view = state => {
+    return html`<div>
+    <h1>${state}</h1>
+      <button @click=${run(add, -1)}>-1</button>
+      <button @click=${run(add, +1)}>+1</button>
+    </div>`;
+  };
+  app.start(document.body, 0, view);
+</script>
+</body>
+</html>
+```
+<apprun-code style="height:200px"></apprun-code>
 
-## Examples
+Or, use the ESM version:
+```js
+<html>
+<body>
+<script type="module">
+  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="height:200px"></apprun-code>
 
-* [RealWorld Example App](https://github.com/gothinkster/apprun-realworld-example-app) - a SPA blogging platform adheres to the [RealWorld specification](https://github.com/gothinkster/realworld) (1100 lines).
-* [Hacker News Reader](https://github.com/yysun/apprun-hn) - PWA hacker news reader (230 lines)
-* [AppRun Demo App](https://yysun.github.com/apprun) - a SPA that has 8 components, including a [Todo component](https://github.com/yysun/apprun/tree/master/demo/components/todo.tsx) (90 lines)
+In addition to run directly in the browser,  you can run the `npm create apprun-app` command to create an AppRun project for using a compiler/bundler like Webpack, esbuild or Vite.
 
-* [AppRun Server-Side Rendering](https://github.com/yysun/apprun-ssr)
-* [AppRun Multilingual Example](https://github.com/yysun/apprun-multilingual)
-* [AppRun Firebase Authentication](https://github.com/yysun/apprun-firebase-authentication)
-* [AppRun Dynamic Module Import](https://github.com/yysun/apprun-dynamic-components)
-* [AppRun Hot Module Reload with Webpack](https://github.com/yysun/apprun-hot-module-reload)
-* [Use Apprun with Parcel](https://github.com/yysun/apprun-parcel-bundler)
-* [AppRun Desktop Application with Electron](https://github.com/yysun/apprun-electron)
-* [AppRun Mobile Application with Framework7](https://github.com/yysun/f7)
+```sh
+npm create apprun-app [my-app]
+```
+
+### Learn More
+
+You can read [AppRun Docs](https://apprun.js.org/docs).
+
+### AppRun Book from Apress
+
+[![Order from Amazon](apprun-book.jpg)](https://www.amazon.com/Practical-Application-Development-AppRun-High-Performance/dp/1484240685/)
+
+* [Order from Amazon](https://www.amazon.com/Practical-Application-Development-AppRun-High-Performance/dp/1484240685/)
 
 
 ## Contribute
@@ -155,18 +249,36 @@ npm test
 ```
 Unit tests can serve as functional specifications.
 
-Finally, to build optimized js files to the dist folder, just run:
+Finally, to build the generated package artifacts, run:
 ```sh
 npm run build
 ```
 
+The build writes `dist`, `esm`, `jsx-runtime.js`, and the demo bundle. They are generated artifacts and are intentionally ignored in source commits. `npm pack --dry-run` runs the same build through `prepack` and verifies the files that will be published.
+
 Have fun and send pull requests.
 
+## Contributors
+[![](https://contributors-img.firebaseapp.com/image?repo=yysun/apprun)](https://github.com/yysun/apprun/graphs/contributors)
+
+## Support
+
+AppRun is an MIT-licensed open-source project. Please consider [supporting the project on Patreon](https://www.patreon.com/apprun). 👍❤️🙏
+
+### Thank you for your support
+
+* Athkahden Asura
+* Alfred Nerstu
+* Gyuri Lajos
+* Lorenz Glißmann
+* Kevin Shi
+* Chancy Kennedy
+
 ## License
 
 MIT
 
-Copyright (c) 2015-2018 Yiyi Sun
+Copyright (c) 2015-2025 Yiyi Sun
 
 
 [travis-image]: https://travis-ci.org/yysun/apprun.svg?branch=master
@@ -175,8 +287,11 @@ Copyright (c) 2015-2018 Yiyi Sun
 [npm-url]: https://npmjs.org/package/apprun
 [license-image]: https://img.shields.io/:license-mit-blue.svg
 [license-url]: LICENSE.md
-[downloads-image]: http://img.shields.io/npm/dm/apprun.svg
+[downloads-image]: https://img.shields.io/npm/dm/apprun.svg
 [downloads-url]: https://npmjs.org/package/apprun
 
 [twitter]: 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
 [twitter-badge]: https://img.shields.io/twitter/url/https/github.com/yysun/apprun.svg?style=social
+
+[discord-image]: https://img.shields.io/discord/476903999023480842.svg
+[discord-invite]: https://discord.gg/CETyUdx