Small component-driven rendering framework
npm install julienneSmall component-driven rendering framework.
``typescript
import { createRenderer, createDevRenderer } from 'julienne';
function serverRender(component, props, context) {
// render component as a string;
let renderedResult = '...';
return renderedResult;
}
// Or use createDevRenderer to set up an HMR-enabled dev server.
let renderer = await createRenderer({
render: {
client: '/path/to/client/render.js',
server: serverRender,
},
templates: {
main: require.resolve('./path/to/component.js'),
},
});
renderer.render('main', propsForMain, context);
`
Create a renderer instance.
#### options.base (optional)
The base public path to serve bundled assets from. See the Vite
documentation for more information.
#### options.cwd (optional)
Set the cwd when compiling and generating the site. It's only necessary to set
this when your build script is not in the directory you're generating your site
from.
If no value is passed, process.cwd() is used by default.
#### options.output (optional)
Type:
`typescript`
{
internal: string;
public: string;
}
Directories to write the output to. If no output is provided, the following
directory structure will be created:
``
.
├── .julienne
│ ├── client
│ └── server
└── public
public is the directory that the site's bundled application bundle and filesinternal
will be written to. contains files internal to julienne used during
rendering.
#### options.render
Type: object
##### options.render.client
Type: string
Path to a module that exports a function that renders a component in the
browser. The module must export a function as the default export with the
following signature:
`typescript`
function render
component,
props,
target,
}: {
component: Component;
props: Record
target: HTMLElement;
}): void | Promise
##### options.render.document (optional)
Function to use to render the document HTML. The function must implement the
following signature:
`typescript`
type RenderDocument = (props: {
body?: string;
head?: string;
links?: Attributes[];
pageData?: unknown;
scripts?: Attributes[];
}) => string;
##### options.render.server
Function to use when rendering components on the server. The function must
implement the following signature:
`typescript`
type Render
component: Component,
props: Record
context?: ServerContext,
) => string | Promise
#### options.templates
Type: { [name: string]: string }
An object that maps template names to file paths.
#### options.viteConfig (optional)
Type: vite.UserConfig
Custom vite configuration.
Compiles and writes the application's bundle to the public output directory.
Example usage:
`typescript`
import { build } from 'julienne';
await builder.build(options);
#### options.base (optional)
The base public path to serve bundled assets from. See the Vite
documentation for more information.
#### options.cwd (optional)
Set the cwd when compiling and generating the site. It's only necessary to set
this when your build script is not in the directory you're generating your site
from.
If no value is passed, process.cwd() is used by default.
#### options.output (optional)
Type:
`typescript`
{
internal: string;
public: string;
}
Directories to write the output to. If no output is provided, the following
directory structure will be created:
``
.
├── .julienne
│ ├── client
│ └── server
└── public
public is the directory that the site's bundled application bundle and filesinternal
will be written to. contains files internal to julienne used during
rendering.
#### options.render
Type: object
##### options.render.client
Type: string
Path to a module that exports a function that renders a component in the
browser. The module must export a function as the default export with the
following signature:
`typescript`
function render
component,
props,
target,
}: {
component: Component;
props: Record
target: HTMLElement;
}): void | Promise
#### options.templates
Type: { [name: string]: string }
An object that maps template names to file paths.
#### options.viteConfig (optional)
Type: vite.UserConfig`
Custom vite configuration.
MIT