apprun 3.36.0 → 3.37.0

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 ## Releases
 
+## 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

package/README.md

@@ -1,16 +1,27 @@
-# 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] [![Discord Chat][discord-image]][discord-invite]
+# AppRun 
 
-## News
+[![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]
 
-We just released [AppRun 3.36.0](https://github.com/yysun/apprun/releases/tag/v3.36.0). See [whats new](WHATSNEW.md) for details.
-
-In this release we had a code review by using Copilot and Claude Sonnet 4, which found and fixed minor bugs and edge cases in virtual DOM handling, as well as bugs in router initialization logic. Also improved overall code quality and stability.
+🚀 July 2025, We have started to improve the codebase using AI. See [whats new](#new) for details.
 
 ## Introduction
 
-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.
+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.
+
+## 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
 
-Use a _Counter_ as an example.
+Let's use a _Counter_ as an example to demonstrate the AppRun architecture:
 
 ```js
 // define the initial state
@@ -34,21 +45,122 @@ app.start(document.body, state, view, update);
 ```
 <apprun-code></apprun-code>
 
-* AppRun is lightweight, only 6KB gzipped, but includes state management, rendering, event handling, and routing.
+With [directives](https://apprun.js.org/docs/directives/) syntax sugar you can write more concise code:
 
-* 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.
+```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="-1">-1</button>
+  <button $onclick="+1">+1</button>
+</div>;
 
-* 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.
+// update is a collection of event handlers
+const update = {
+  '+1': state => state + 1,
+  '-1': state => state - 1
+};
 
-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.
+// start the app
+app.start(document.body, state, view, update);
+```
+<apprun-code></apprun-code>
 
-## AppRun Benefits
+Alternatively, you can invoke state update functions without events for local state updates:
 
-* Clean architecture that needs less code
-* State management and routing included
-* No proprietary syntax to learn (no hooks, no reducers, no signals)
-* Use directly in the browser or with a compiler/bundler
-* Advanced features: JSX, Web Components, Dev Tools, SSR, etc.
+```js
+// define the initial state
+const state = 0;
+
+// state update function
+const add = (state, value) => state + value;
+
+// 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);
+```
+<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>
+
+
+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';
+use_react(React, ReactDOM);
+```
+
+The `app.use_render` function allows you to use a other render library for rendering the view. Enjoy the rich ecosystem of React.
+
+```js
+import { render } from 'preact'
+import app from 'apprun';
+app.use_render(render);
+```
+
+There are many more examples and interactive demos available in [the AppRun Playground](https://apprun.js.org/#play).
 
 
 ## Getting Started
@@ -58,15 +170,23 @@ AppRun is distributed on npm. To get it, run:
 ```sh
 npm install apprun
 ```
-You can also load AppRun directly from the unpkg.com CDN:
+
+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`, `html` and `run` functions are available globally. The `html` is a HTML template from lit-html. The `run` function is a equivalent to the `$on` directive, which can be used to invoke state update functions.
 
 ```js
 <html>
 <body>
 <script src="https://unpkg.com/apprun/dist/apprun-html.js"></script>
 <script>
-  const view = state => `<div>${state}</div>`;
-  app.start(document.body, 'hello AppRun', view);
+  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>
@@ -87,9 +207,7 @@ Or, use the ESM version:
 ```
 <apprun-code style="height:200px"></apprun-code>
 
-In addition to run directly in the browser,  or with a compiler/bundler like Webpack or Vite.
-
-You can run the `npm create apprun-app` command to create an AppRun project.
+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.
 
 ```sh
 npm create apprun-app [my-app]
@@ -97,11 +215,11 @@ npm create apprun-app [my-app]
 
 ### Learn More
 
-You can get started with [AppRun Docs](https://apprun.js.org/docs) and [the AppRun Playground](https://apprun.js.org/#play).
+You can read [AppRun Docs](https://apprun.js.org/docs).
 
 ### AppRun Book from Apress
 
-[![Order from Amazon](https://images-na.ssl-images-amazon.com/images/I/51cr-t1pdSL._SX348_BO1,204,203,200_.jpg)](https://www.amazon.com/Practical-Application-Development-AppRun-High-Performance/dp/1484240685/)
+[![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/)
 

package/WHATSNEW.md

@@ -1,8 +1,25 @@
 ## What's New
 
+> July 22, 2025, 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)
+- Improved type definitions for better TypeScript support
+- Moved the component to dev-tools
+- Fixed routing basePath initialization issue
+
+
+> July 15, 2025, V3.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 document](#docs/requirements/req-hierarchical-routing.md)
+
+
 > July 12, 2025, V3.36.0
 
-Code review by using Copilot and Claude Sonnet 4
+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
@@ -63,20 +80,20 @@ If you have components subscribe to '#', or '#/', Apprun will fallback to the ha
 You can now use async generator functions for event handlers. The async generator function can return multiple values. AppRun will render each value in the order they are generated.
 
 ```js
-  const state = {};
-  const view = state => html`
+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://my-xkcd-api.glitch.me');
-    const comic = await response.json();
-    yield { comic };
-  }
-
-  app.start(document.body, state, view);
+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);
 ```
 <apprun-code></apprun-code>
 
@@ -93,7 +110,7 @@ The `apprun-html.js` now uses `lit-html` V3 for rendering the view. The `apprun-
   <title>Counter</title>
 </head>
 <body>
-  <script src="https://unpkg.com/dist/apprun-html"></script>
+  <script src="https://unpkg.com/apprun/dist/apprun-html"></script>
   <script>
   const add = (state, delta) => state + delta;
   const view = state => {

package/apprun.d.ts

@@ -1,3 +1,40 @@
+/**
+ * AppRun TypeScript Declaration File
+ * 
+ * This file provides TypeScript declarations for the AppRun framework:
+ * 1. Core Framework Types
+ *    - Component lifecycle (View, Action, Update)
+ *    - Virtual DOM (VNode, VDOM)
+ *    - Event system with comprehensive options
+ * 
+ * 2. Application Interfaces
+ *    - IApp: Main framework interface
+ * 
+ * 3. Configuration Options
+ *    - EventOptions: Event handling configuration
+ *    - ActionOptions: Action behavior settings
+ *    - MountOptions: Component mounting configuration
+ *    - CustomElementOptions: Web component settings
+ * 
+ * 4. Integration Support
+ *    - React integration types
+ *    - Lit-html TemplateResult support
+ *    - JSX namespace declarations
+ *    - State management with createState
+ * 
+ * Updated in v3.35.1:
+ * - Consolidated types from types.ts implementation
+ * - Enhanced type safety with better generic constraints
+ * - Improved lifecycle hook typing with proper signatures
+ * - Added routing system types with ComponentRoute
+ * - Better integration with external libraries
+ * - Comprehensive options typing matching implementation
+ * - Added proper deprecation warnings
+ * - Enhanced error handling and validation
+ */
+
+import { TemplateResult } from 'lit-html';
+
 declare module 'apprun' {
 
   export type Element = HTMLElement | string;
@@ -7,93 +44,138 @@ declare module 'apprun' {
     props: {},
     children: Array<VNode | string>
   };
-  export type VDOM = false | string | VNode | Array<VNode | string> | any; // TemplateResult from lit-html
+
+  export type VDOM = false | string | VNode | Array<VNode | string> | TemplateResult;
   export type View<T> = (state: T) => VDOM | void;
   export type Action<T> = (state: T, ...p: any[]) => T | Promise<T> | void;
   export type ActionDef<T, E> = (readonly [E, Action<T>, {}?]);
   export type Update<T, E = any> = ActionDef<T, E>[] | { [name: string]: Action<T> | {}[] } | (E | Action<T> | {})[];
-  export type Route = (url: string, ...args: any[]) => any;
-  export type EventOptions<T = any> = {
+  export type Router = (url: string, ...args: any[]) => any;
+
+  export type EventOptions = {
     once?: boolean;
     transition?: boolean;
     delay?: number;
   } | any;
-  export type CustomElementOptions = {
+
+  export type ActionOptions = {
     render?: boolean;
-    shadow?: boolean;
-    history?: boolean;
-    global_event?: boolean;
-    observedAttributes?: string[];
+    history?;
+    global?: boolean;
+    callback?: (state: any) => void;
   };
 
   export type MountOptions = {
-    render?: boolean, history?, global_event?: boolean,
+    render?: boolean;
+    history?;
+    global_event?: boolean;
+    route?: string;
     transition?: boolean;
-    route?: string
   };
 
   export type AppStartOptions<T> = {
     render?: boolean;
-    transition?: boolean;
     history?;
+    transition?: boolean;
     route?: string;
     rendered?: (state: T) => void;
-    mounted?: (props: any, children: any[], state: T) => T | void;
+    mounted?: (props: any, children: any, state: T) => T;
+  };
+
+  export type CustomElementOptions = {
+    render?: boolean;
+    shadow?: boolean;
+    history?: boolean;
+    global_event?: boolean;
+    observedAttributes?: string[];
+  };
+
+  export type ComponentRoute = {
+    [route: string]: any;
   };
 
   export interface IApp {
-    start<T, E = any>(element?: Element | string, model?: T, view?: View<T>, update?: Update<T, E>,
-      options?: AppStartOptions<T>): Component<T, E>;
-    on(name: string, fn: (...args: any[]) => void, options?: any): void;
-    once(name: string, fn: (...args: any[]) => void, options?: any): void;
-    off(name: string, fn: (...args: any[]) => void): void;
+    // Event system methods
+    on(name: string, fn: (...args: any[]) => any, options?: EventOptions): void;
+    once(name: string, fn: (...args: any[]) => any, options?: EventOptions): void;
+    off(name: string, fn: (...args: any[]) => any): void;
     find(name: string): any;
     run(name: string, ...args: any[]): number;
-    query(name: string, ...args): Promise<any[]>; // obsolete
-    runAsync(name: string, ...args): Promise<any[]>;
-    h(tag: string | Function, ...children: any[]): VNode | VNode[];
-    createElement(tag: string | Function, ...children: any[]): VNode | VNode[];
-    render(element: Element | string, node: VDOM): void;
-    Fragment(props: any[], ...children: any[]): any[];
-    route?: Route;
-    webComponent(name: string, componentClass, options?: CustomElementOptions): void;
+    runAsync(name: string, ...args: any[]): Promise<any[]>;
+
+    /** @deprecated Use runAsync() instead. query() will be removed in a future version. */
+    query(name: string, ...args: any[]): Promise<any[]>;
+
+    start<T, E = any>(element?: Element | string, model?: T, view?: View<T>, update?: Update<T, E>,
+      options?: AppStartOptions<T>): Component<T, E>;
+
+    h(tag: string | Function, props?: any, ...children: any[]): VNode | VNode[];
+    createElement(tag: string | Function, props?: any, ...children: any[]): VNode | VNode[];
+    render(element: Element | ShadowRoot, node: VNode, component?: {}): void;
+    Fragment(props: any, ...children: any[]): any[];
+
+    route: Router;
+    basePath?: string;
+    addComponents: (element: Element | string, components: ComponentRoute) => void;
+
+    webComponent(name: string, componentClass: any, options?: CustomElementOptions): void;
     safeHTML(html: string): any[];
-    use_render(render, mode?: 0 | 1);
-    use_react(React, ReactDOM);
+    use_render(render: any, mode?: 0 | 1): void;
+    use_react(React: any, ReactDOM: any): void;
     version: string;
   }
 
   export class Component<T = any, E = any> {
-    constructor(state?: T, view?: View<T>, update?: Update<T, E>);
+    constructor(state?: T, view?: View<T>, update?: Update<T, E>, options?: any);
+    readonly element: Element;
     readonly state: T;
-    setState(state: T, options?: { render?: boolean, history?: boolean }): void;
-    mount(element?: Element | string, options?: MountOptions): Component<T, E>;
-    start(element?: Element | string, options?: MountOptions): Component<T, E>;
-    on(name: E, fn: (...args: any[]) => void, options?: any): void;
-    run(name: E, ...args: any[]): number;
-    query(name: string, ...args): Promise<any[]>; // obsolete
-    runAsync(name: string, ...args): Promise<any[]>;
-    rendered: (state: T) => void;
-    mounted: (props: any, children: any[], state: T) => T | void;
-    unmount: () => void;
-    unload: (state: T) => void;
+    view?: View<T>;
+    update?: Update<T, E>;
+
+    // Lifecycle hooks
+    rendered?: (state: T) => void;
+    mounted?: (props: any, children: any[], state: T) => T | void;
+    unload?: (state: T) => void;
+
+    // Component lifecycle methods
+    mount(element?: Element, options?: MountOptions): Component<T, E>;
+    start(element?: Element, options?: MountOptions): Component<T, E>;
+    unmount(): void;
+
+    // State management
+    setState(state: T, options?: ActionOptions & EventOptions): void;
+
+    // Event system
+    on(event: E, fn: (...args: any[]) => void, options?: EventOptions): void;
+    run(event: E, ...args: any[]): any;
+    runAsync(event: E, ...args: any[]): Promise<any[]>;
+
+    /** @deprecated Use runAsync() instead. query() will be removed in a future version. */
+    query(event: E, ...args: any[]): Promise<any[]>;
+
+    // Action management
+    add_action(name: string, action: Action<T>, options?: ActionOptions): void;
+    is_global_event(name: string): boolean;
   }
 
   export function on<E>(name?: E, options?: EventOptions): any;
-  // obsolete
-  export function update<E>(name?: E, options?: EventOptions): any;
-  export function event<E>(name?: E, options?: EventOptions): any;
   export function customElement(name: string, options?: CustomElementOptions):
     <T extends { new(...args: any[]): {} }>(constructor: T) => T;
 
-  export const app: IApp
+  // Deprecated exports (kept for backward compatibility)
+  /** @deprecated Use on() instead */
+  export function update<E>(name?: E, options?: EventOptions): any;
+  /** @deprecated Use on() instead */
+  export function event<E>(name?: E, options?: EventOptions): any;
+
+  export const app: IApp;
   export default app;
   export const App: IApp;
 
   export const ROUTER_EVENT: string;
   export const ROUTER_404_EVENT: string;
-  export const safeHTML;
-  export function Fragment(props, ...children): [];
+  export const safeHTML: (html: string) => any[];
+  export function Fragment(props: any, ...children: any[]): any[];
 }
 
 declare namespace JSX {
@@ -104,5 +186,13 @@ declare namespace JSX {
 
 declare module 'apprun/react' {
   import { Component } from 'apprun';
-  export default function toReact(componentClass: Component): Function;
+  export default function toReact<T = any>(componentClass: Component<T>): Function;
+}
+
+declare module 'apprun/createState' {
+  type Draft<T> = T;
+  export default function createState<T = any>(
+    state: T,
+    updater: (draft: Draft<T>) => void
+  ): Promise<T> | T;
 }

package/cli/app.js

@@ -0,0 +1,29 @@
+const { app, html } = window["apprun"];
+
+// Routing (component event)
+class Home extends Component {
+  view = () => html`<div>Home</div>`;
+  update = { '/, /home': state => state };
+}
+
+class Contact extends Component {
+  view = () => html`<div>Contact</div>`;
+  update = { '/contact': state => state };
+}
+
+class About extends Component {
+  view = () => html`<div>About</div>`;
+  update = { '/about': state => state };
+}
+
+const App = () => html`<div id="menus">
+  <a href="/home">Home</a> |
+  <a href="/contact">Contact</a> |
+  <a href="/about">About</a></div>
+  <div id="pages"></div>
+`;
+
+// app.basePath = '/'; // Uncomment this line if you want to set a base path for routing
+app.start('#app', {}, App);
+
+[About, Contact, Home].map(C => new C().start('pages'));

package/cli/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AppRun App</title>
+  <script src="https://unpkg.com/apprun/dist/apprun-html.js"></script>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="app.js"></script>
+</body>
+</html>

package/{apprun-cli.js → cli/index.js}

@@ -1,9 +1,10 @@
 #!/usr/bin/env node
 
 const { program } = require('commander');
-const { existsSync, writeFileSync, mkdirSync } = require('fs');
+const { existsSync, writeFileSync, mkdirSync, copyFileSync } = require('fs');
 const { resolve, dirname } = require('path');
-const { red, green, yellow } = require('./cli/colors');
+const { red, green, yellow } = require('./colors');
+const execSync = require('child_process').execSync;
 
 const component_template = `import {app, Component} from 'apprun';
 
@@ -26,31 +27,28 @@ import #name from './#fn';
 describe('component', () => {
   it('should render state upon route event', () => {
     const element = document.createElement('div');
-    const component = new #name().mount(element);
-    //app.run('/#name');
-    component.run('.');
+    const component = new #name().start(element);
     expect(element.textContent).toBe('#name');
   })
 })
 `;
 
 program
-  .version('3.0.0')
+  .version('3.36.0')
   .description('AppRun CLI')
   .option('-i, --init', 'Initialize AppRun Project')
   .option('-c, --component <name>', 'Create a component')
   .option('-t, --test <name>', 'Create a component spec')
   .option('-p, --pages [directory]', 'Create example pages')
 
-
 program.parse(process.argv);
 
 const options = program.opts();
 if (options.init) {
-  console.log(`\nPlease use ${yellow('npm create apprun-app')} to create AppRun projects.\n`);
-  return;
+  execSync('npm create apprun-app@latest', { stdio: 'inherit' });
 }
 
+
 function createTestFile(fn, name) {
   const component_name = name || fn.split('/').pop();
   const component_file = fn.split('/').pop();
@@ -95,8 +93,4 @@ if (options.pages) {
   createTestFile(`${pages}/About/index`, 'About');
   createComponent(`${pages}/Contact/index`, 'Contact');
   createTestFile(`${pages}/Contact/index`, 'Contact');
-}
-
-
-
-
+}