API

App API

The application entry point creates the root component, installs plugins, and mounts or unmounts the component tree.

createApp

import { Component, VNode, createApp } from '@geektech/tsone';

class App extends Component<object, object> {
  protected initState() {
    return {};
  }

  protected initStyles(): void {}

  protected render(): VNode {
    return {
      tag: 'main',
      children: ['Hello TSone'],
    };
  }
}

const app = createApp({
  root: App,
  state: {
    appName: 'TSone',
  },
  config: {
    debug: true,
  },
});

app.mount();

A minimal application can be written as createApp({ root: App }).

After creating the application, call app.mount(). When rootElement is omitted, the application mounts to #app by default. If the target element does not exist, the mount is safely skipped.

AppOptions

interface AppOptions<TState, TConfig> {
  root?: ComponentConstructor;
  rootProps?: ComponentProps;
  rootElement?: string | Element;
  state?: TState;
  config?: TConfig;
  document?: AppDocumentOptions;
}

• root: the root component class
• rootProps: props passed to the root component constructor
• rootElement: an optional mount-point selector or DOM element; defaults to #app
• state: application-level state
• config: application-level configuration
• document: the HTML document shell configuration used to generate entry pages during dev/build

OneApp Methods

• mount(): mounts the root component and triggers plugin onMounted hooks
• unmount(): unmounts the root component and clears the mount container
• use(plugin): installs a plugin, such as the router
• update(state): merges an application state update
• getState() / setState(state): reads or replaces application-level state
• getContext(): returns the context containing app, version, and config
• updateRootComponent(App): replaces the root component
• onUnmounted(callback): registers a callback that runs after unmounting
• provide(key, value): provides an application-level dependency
• inject(key, fallback?): retrieves an application-level dependency
• renderHtmlDocument(options?): generates a complete HTML document from the application document configuration

renderHtmlDocument

createApp's document configuration emits a #app mount node by default. Pass rootElement to override the default mount point. To replace the document content, body accepts TSone component nodes, VNodes, or text nodes. Text is escaped as text content and is not parsed as HTML.

In Bun/Node static-generation environments, provide a DOM-like document first, such as the Happy DOM instance used by the project documentation build script.

import {
  Component,
  VNode,
  createApp,
  type StyleSheet,
} from '@geektech/tsone';

interface AppProps {
  message: string;
}

class App extends Component<AppProps, object> {
  protected initState() {
    return {};
  }

  protected initStyles(): void {}

  protected render(): VNode {
    return {
      tag: 'main',
      props: { className: 'app' },
      children: [this.props.message],
    };
  }
}

const styles: StyleSheet = [
  {
    selector: '.app',
    properties: { maxWidth: '72rem' },
  },
];

const app = createApp({
  root: App,
  document: {
    lang: 'en',
    title: 'TSone Docs',
    description: 'Static documentation generated by TSone',
    styles,
  },
});

const html = app.renderHtmlDocument({
  scripts: [{ type: 'module', src: '/assets/app.js' }],
});

• lang: the language tag emitted on the html element; defaults to en
• title: the HTML-escaped document title
• description: an optional meta description
• styles: an array of StyleSheet objects serialized by the framework into style elements
• scripts: external script configuration, such as a module client bundle

Development Tooling API

Development and build APIs are exported by the separate @geektech/tsone-cli package, not by the @geektech/tsone framework root.

import {
  build,
  createProject,
  defineConfig,
  resolveConfig,
  startDevServer,
} from '@geektech/tsone-cli';

const config = defineConfig({ build: { outDir: 'dist' } });
const resolved = await resolveConfig({ config });
const server = await startDevServer({ port: 0 });

try {
  console.log(server.url);
} finally {
  server.stop();
}

const result = await build({ outDir: 'release' });
console.log(result.root, result.outDir, result.assetsBuilt);

The config file supports only a plain-object default export; functional or function-valued config is not supported. Configuration defaults are entry src/main.ts, pages {}, server host 127.0.0.1, port 52211, an empty server.proxy, and build.outDir dist. The entry must use export const app and provide renderHtmlDocument(). The pages option maps routes to page entries, each with the same export const app contract; the root / route is served by entry.

The development server serves HTTP only. Proxy targets may use HTTP or HTTPS. server.proxy accepts string or { target, changeOrigin, rewrite } rules. Literal prefixes use the longest match first; query strings, bodies, and end-to-end headers are forwarded, and failed upstream connections return 502 Bad Gateway.

build.outDir must be a safe child directory of the project root. CLI v1 has no config plugins, WebSocket, HMR, SSR, functional config, public/ copying, or public minify/sourcemap configuration.