Why?

A Vue view is the same ceremony every time: a <template>, a data(), some methods, lifecycle hooks, watchers. For data-driven screens — dashboards, forms, admin panels — the structure is identical and only the parts change. @wbc-ui2/js removes the ceremony.

A view becomes a folder of _*.js parts. assembleViewData maps them into a viewData object by filename convention; the WBGC container then renders that object through the @wbc-ui2/core recursive engine. No hand-written _viewData.js, no <template> boilerplate.

The filename is the contract. The lifecycle is four named modules. Reactivity is one explicit _update().

What is @wbc-ui2/js?

A Vue 2.7+ plugin that installs WBGC — a view container that turns a data-driven viewData object (or a glob of _*.js convention files) into a fully rendered, reactive view via WBC.

Vue.use(WBJs, { store, router, vuetify }) → <WBGC :modules="…" /> | <WBGC :viewData="…" />

Externalized from the global_frontend_vite app's myPackages/wbjs-loader2 and converted from Webpack to Vite.

Install

npm i @wbc-ui2/js @wbc-ui2/core vue@^2.7

import Vue from "vue";
import WBJs from "@wbc-ui2/js";

Vue.use(WBJs, {
  components: { RouterView, RouterLink },
  store,
  router,
  vuetify,
});
// now <WBGC :modules="…" /> or <WBGC :viewData="…" /> is available globally

Usage

Level 1 — :modules (recommended)

Pass an import.meta.glob map of _*.js convention files from your view folder. WBGC assembles them into a viewData object via assembleViewData — no hand-written _viewData.js.

<WBGC :modules="import.meta.glob('./**/_*.js', { eager: true })" />

The filename keys the target (leading _ + extension stripped):

| File | Becomes | |---|---| | _init.js | viewData.init | | _viewComps.js | viewData.viewComps | | _watchers.js | viewData.watchers | | _tracker.js | viewData.tracker | | data/_form.js | viewData.data.form |

_view.js and _viewData.js are skipped — they are entry files, not convention modules.

Level 2 — :viewData (legacy)

Pass a pre-assembled viewData object directly. Still works, but the :modules path is preferred.

<WBGC :viewData="myViewData" />

Lifecycle hooks (execution order)

flowchart LR
  A["_init0<br/>created()"] --> B["_init<br/>mounted()"]
  B --> C["_tracker<br/>every updated()"]
  C -->|re-render| C
  C --> D["_finalAction<br/>beforeDestroy()"]

| Hook | Timing | Signature | |---|---|---| | _init0 | created() — before jsDive resolution | (jsAccessibility) => void | | _init | mounted() — after jsDive, view mounted | (jsAccessibility) => void | | _tracker | every updated() — after each re-render | (jsAccessibility) => void | | _finalAction | beforeDestroy() — teardown | (jsAccessibility) => void |

Hooks are authored as modules (_init0.js, _init.js, _tracker.js, _finalAction.js) inside the view folder and auto-assembled by the :modules convention.

_this — jsAccessibility (the dynamic surface)

Every hook, watcher, and view-tree function receives a jsAccessibility object (aliased as _this in view expressions) that exposes the view's reactive context:

| Key | What it is | |---|---| | _state / _s | View-local reactive state from _data.js (same reference — interchangeable) | | _data | The resolved view tree (viewComps) | | _store | Vuex store | | _route | Current route | | _routeParams | Current route params | | _router | Vue Router instance | | _routes | Named route map | | _lg | Language helper ({ lang, get, set }) | | _user | Current user (from store) | | _loggedIn | Login status | | _props | Component props | | _methods | View-local helpers from _methods.js | | _meta | View metadata |

Property-path watchers

Watchers in _watchers.js use dotted paths relative to jsAccessibility:

// _watchers.js
export default [
  ['_state.loading', (thiss) => { /* called when loading changes */ }],
]

Scaffold a view

npx wbjs-create-view            # generates a ready _view.js + view folder

The scaffolded _view.js imports createView from @wbc-ui2/js, so it resolves from a bare consumer — no app-local utils/createView.js required.

Public API

| export | purpose | |---|---| | install (default) | Vue.use(WBJs, { store, router, vuetify, components }) — registers the global WBGC | | WBGC | the view container component (:modules / :viewData / :viewParams / :loaderDive) | | WBC | the recursive renderer re-exported from @wbc-ui2/core | | assembleViewData(modules) | glob map of _*.js files → viewData object (filename → key) | | createView(...) | view-entry factory used by the wbjs-create-view scaffold |

Build

npm run build        # → dist-dev/js2.{es,umd}.js
npm run build:free   # → dist-free/js2.{es,umd}.js  (published artifact, rewritten to dist/ on publish)

Peers

| Peer | Role | |---|---| | @wbc-ui2/core | the WBC recursive renderer (registered on the WBGC subclass) | | vue@^2.7 | host Vue instance |

@wbc-ui2/dataviewer is an optional peer — the host app registers it if needed.

Ecosystem

@wbc-ui2/js is one package of the @wbc-ui2 monorepo — every package builds on @wbc-ui2/core's "UI as Data" engine: code, chart, dataviewer, latex, mermaid, gis, alert, press, js. Its sibling @wbc-ui2/press turns a content graph into a site; @wbc-ui2/js turns a folder of parts into a view — both ride WBC.

This product is planned, built, and released through the wb-flow workflow.

License

The free-tier build (published to npm as @wbc-ui2/js) is licensed under the MIT License — see LICENSE.

The pro-tier build (dist-pro/) is distributed under a separate commercial license. Contact the copyright holder for commercial licensing.

MIT © Wissem Boughamoura · wi-bg.com · wbc-ui.com