Use the new oc-template-solid template on vite-templates
SolidJS template with support & utilities for the OpenComponents template system
Name | Version |
---|---|
oc-template-solid |
|
oc-template-solid-compiler |
Initialize a component with the oc-template-solid and follow the CLI instructions
$ npx oc init my-awesome-oc oc-template-solid
$ cd my-awesome-oc
$ npm install
template.src
- the Solid App entry point - should export a solid component asdefault
template.type
-oc-template-solid
- required in
devDependencies
-oc-template-solid-compiler
,solid-js
props = server()
- the viewModel generated by the server is automatically passed to the solid application as props- The oc-client-browser is extended and will now expose all the available solid-component at
oc.solidComponents[bundleHash]
- You can register an event handler within the oc.events system for the the
oc:componentDidMount
event. The event will be fired immediately after the solid app is mounted. - You can register an event handler within the oc.events system for the the
oc:cssDidMount
event. The event will be fired immediately after the style tag will be added to the active DOM tree.
Server Side Rendering
= server side rendering should work as for any other OpenComponentcss-modules
are supported.sass-modules
are supported (you need to install thenode-sass
dependency).post-css
is supported with the following plugins:
The compiler exposes some utilities that could be used by your Solid application:
A hook that will make a getData
function available via props, plus
the initial data passed from the server to the component.
import { useData } from 'oc-template-solid-compiler/utils/useData';
const App = (props) => {
// getData and getSetting are always available
const { id, getData, getSetting } = useData<{ id: number }>();
const staticPath = getSetting('staticPath');
return (
<div>
<h1>Id: {id}</h1>
<img src={`${staticPath}/public/logo.png`} alt="Logo" />
</div>
)
};
yourEnhancedApp = withDataProvider(yourApp);
getData
accept one argument: (params) => Promise<result>
. It will perform a post back request to the component endpoint with the specified query perams invoking the callback with the results.
getSetting
accept one argument: settingName => settingValue
. It will return the value for the requested setting.
Settings available at the moment:
getSetting('name')
: return the name of the OC componentgetSetting('version')
: return the version of the OC componentgetSetting('baseUrl')
: return the baseUrl of the oc-registrygetSetting('staticPath')
: return the path to the static assets of the OC component
For more details, check the example app