@based/docs

/cli

/bundle

/functions

/stories

/docs

@based

/cli

npx @based/cli@alpha dev

--cloud

{
  url: "ws://192.168.50.160:1234"
}

CLI connection before

{
  cluster: 'production',
  org: 'myOrg',
  project: 'myProject',
  env: '#branch', //main
}

CLI connection after

Switch between servers automatically

^8.0.0-alpha.11

@based

/bundle

Watch multiple files or directories using glob patterns, including support for include and exclude

{
	watch: {
      include: ['*.ts'],
      exclude: ['*.js', '*.json'],
    }
}

@based

/bundle

Can execute any custom esbuild plugin direct from the Based App Function

{
	plugins: [
    	reactPlugin({
	      fastRefresh: true,
    	  injectReact: true,
	      removeDevtoolsInProd: true,
    	}),
	]
}

@based

/bundle

Supports importing, loading, and deploying WASM in any project using @based/cli

import TreeSitter from 'web-tree-sitter'
import TreeSitterTypescriptWASM from 'tree-sitter-typescript/tree-sitter-tsx.wasm'
import TreeSitterWASM from 'web-tree-sitter/tree-sitter.wasm'

@based

/functions

import type { BasedFunctionConfig } from '@based/functions'
import { storiesPlugin } from '@based/stories'

const config: BasedFunctionConfig = {
  type: 'app',
  name: 'docs',
  public: true,
  main: './app.tsx',
  path: '/',
  favicon: './favicon.ico',
  build: {
    watch: {
      include: ['**.stories.tsx'],
    },
    plugins: [
      storiesPlugin({
        debug: true,
      }),
    ],
  },
}

^3.1.0-alpha

@based

/stories

^0.1.20-alpha

esbuild plugin to parse Stories files '*.stories.tsx'
Is fully typed and provides global namespaced access { Based.Stories.N }
Use Tree-Sitter WASM under the hood (blazing fast 🚀)
Has a chache system and only send new stories to be parsed if it changes
Supports parsing almost any TypeScript method (except for a few cases), recursively searching and resolving imports, and extracting all types, props, parameters, and comments
Our biggest and most complex story gets parsed in 0.1s
Parsing our 51 stories from @based/ui takes 2.11s
Expose BasedStoriesProvider to inject all parsed content into a React Context
Expose useStories hook to get any story in the components

@based

/stories

^0.1.20-alpha

{
  // ...meta
  "component": {
    "importSource": "@based/ui",
    "exportType": "named",
    "description": "The BarChart component renders a customizable bar chart ...",
    "displayName": "BarChart",
    "propsTypeName": "BarChartProps",
    "props": {
	  // ...props               
      "data": {
        "name": "data",
        "type": "Record<string, number>[]",
        "required": false,
        "description": "The data to be visualized in the bar chart. ...",
        "defaultValue": null
      },
      "xFormat": {
      	"name": "xFormat",
        "type": "(x: number) => string",
        "required": true,
        "description": "Optional formatter for x-axis values.",
        "defaultValue": null
      },
      // ...props
    }
  }
  // ...meta & blocks
}

@based

/docs

Simple React App to be used in a Based App Function
Was built with the new @based/ui & @based/cli
Exposes a main method MountDocs if you the user want to go with 0 config
Esposes typed routes & router hooks
Exposes stories hook and stories provider if you want to build your own docs page manually
Is multilanguage by design, after install the package an 'i18n' folder is added in the project root
Is fully typed and provides global namespaced access { Based.Docs.N }

^0.1.20-alpha

@based

/docs

^0.1.20-alpha

import client, { type BasedClient } from '@based/client'
import basedConfig from '../based.js'
import { MountDocs } from '@based/docs'
import { type TranslationsType, languages } from './i18n/index.js'

export const based: BasedClient = client(basedConfig)
const rootElement = document.getElementById('root')!

MountDocs<TranslationsType>({
  rootElement,
  based,
  darkImage,
  lightImage,
  languages,
})