@dooboostore/simple-boot-front

@dooboostore/simple-boot-frontis the browser-side runtime for DoobooStore applications. It combines:

• @dooboostore/simple-bootfor DI, routing, modules, and lifecycle
• @dooboostore/dom-renderfor component rendering and template bindings
• @dooboostore/core-webrouters for path/hash navigation

Why This Package

• Component-first SPA runtime with decorator metadata.
• Root-level API exports for standard app usage.
• Bundle entry support for bundlers that prefer a single explicit subpath.
• Router lifecycle streams (routingStartObservable,routingEndObservable) for integration points.
• Compatibility with path and hash routing viaSimFrontOption.

Quick Start

npm init @dooboostore/simple-boot-front my-appcdmy-app
npm install
npm run dev

Installation

pnpm add @dooboostore/simple-boot-front reflect-metadata

Import Guide

Root import (recommended for normal library usage):

import{SimpleBootFront,SimFrontOption,UrlType,Component,Script,ComponentBase}from'@dooboostore/simple-boot-front';

Bundle entry import (explicit bundle-style contract):

import*asSimpleBootFrontBundlefrom'@dooboostore/simple-boot-front/bundle-entry';constapp =newSimpleBootFrontBundle.SimpleBootFront(newSimpleBootFrontBundle.SimFrontOption(
        {window,selector:'#app',urlType:SimpleBootFrontBundle.UrlType.path},
        {rootRouter:IndexRouterComponent}
    )
);

Minimal App Example

import'reflect-metadata';import{Sim,Router}from'@dooboostore/simple-boot';import{Component,ComponentBase,ComponentRouterBase,SimpleBootFront,SimFrontOption,UrlType}from'@dooboostore/simple-boot-front';@Sim@Component({template:'<h1>Hello SimpleBootFront</h1>'})classHomePageextendsComponentBase{}@Sim@Router({path:'',route: {'/':HomePage} })@Component({template:'<main><dr-this value="${@this@.child}$"></dr-this></main>'})classIndexRouterComponentextendsComponentRouterBase{}constapp =newSimpleBootFront(newSimFrontOption(
        {window,selector:'#app',urlType:UrlType.path},
        {rootRouter:IndexRouterComponent}// 2nd arg: simple-boot InitOptionType)
);

app.run();

Core API

• SimpleBootFront
  • Browser runtime bootstrap class (extendsSimpleApplicationfrom@dooboostore/simple-boot).
  • run(otherInstanceSim?, url?)bootstraps the app;goRouting(url)/routingRouterModule(url)navigate programmatically.
  • routingObservable/routingStartObservable/routingEndObservable— observe routing transitions ({ triggerPoint, domRenderRouter, routerModule }).
  • getSimstanceManager()exposes the underlying DI container.
  • SSR data hydration helpers used together with@dooboostore/simple-boot-http-server-ssr:saveDataHydration(key, data),getDataHydration(key),cutDataHydration(key)(read-and-remove),deleteDataHydration(key),clearDataHydration(),writeDataHydration()(serializes pending hydration data into a<script>tag).
• SimFrontOption/UrlType
  • Front runtime option object.
  • new SimFrontOption(config, initSimOption?):configsetswindow, rootselector(default#app), route strategy (urlType: UrlType.path | UrlType.hash, defaultpath), andusing;initSimOptionis simple-boot'sInitOptionType(rootRouter,advice,cache, ...).rootRouteris the top-level@Routercomponent.
• @Component(config)(alias:@component)
  • Registers renderable component metadata:selector(defaults to the lowercased class name),template,styles,using,proxy, andnoStrip(keep the host element instead of stripping it).
  • Can also be used bare (@Componentwith no config).
• @Script(config?)(alias:@script)
  • Registers a class extendingScriptRunnable(implementsrun(...args)) under a name (defaults to the class name) so templates/other components can invoke it as a script function.
• ComponentBase
  • Extends dom-render'sComponentBaseand implementsRouterAction.OnRoutingwith a default no-oponRouting.
• ComponentRouterBase
  • Router-aware component base (extends dom-render'sComponentRouterBase). ImplementscanActivate/onRoutingto swap in the routed child component, and exposesgetPathData<T>()for the current route's path data.
• ComponentSet
  • Wraps an arbitrary object together with its@Componenttemplate/styles (extends dom-render'sComponentSet) — used internally when swapping routed components.
• Lifecycle interfaces:OnInitedChild(onInitedChild(): void),OnFinish(onFinish(): void),onChangedRender(onChangedRender(): void) — implement on a component to hook into these lifecycle points.
• Namespace re-exports: importing from the package root also gives youCore,CoreWeb,DomRender,SimpleBoot(namespaced re-exports of@dooboostore/core,@dooboostore/core-web,@dooboostore/dom-render,@dooboostore/simple-boot), so you don't need to add those as separate dependencies just to reach a type or utility.

Architecture Notes

• SimpleBootFrontextendsSimpleApplicationfrom@dooboostore/simple-boot.
• ADomRenderinstance is created and stored in simstance storage.
• Router events from dom-render are translated into SimpleBoot routing flow.
• Root render object is managed byDomRenderRootObject.

Troubleshooting

• reflect-metadatamust be loaded before decorators are evaluated.
  • The package root imports it, but addimport 'reflect-metadata'to your entry when importing from subpaths.
• Target selector must exist in the current document.
  • SimFrontOption.selectordefaults to#app.
• If path routing does not behave as expected in static hosting, try hash mode.
  • SeturlType: UrlType.hash.

Learn More

The detailed API documentation, including all decorators and usage examples, is available on the documentation website.

License

This package is licensed under theMIT License.