/cli
/bundle
/functions
/stories
/docs
@based
@based
@based
@based
@based
@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,
})@based/docs
By Luigui Delyer
