This package supports rendering for web components with the following features:
- stores state information for the web component
- a render cycle is started when state is changed
WekoRenderMixin is a mixin that extends a class implementing a custom component. The class must
have a constructor and the constructor must call super.
👉 The weko-render package includes TypeScript type support.
import { WekoRenderMixin } from "https://esm.sh/@rlmcneary2/weko-render";
class MyWebComponent extends WekoRenderMixin(HTMLElement) {
constructor() {
super();
}
// class implementation
}none
none
none
TODO: methods and properties
Use "esm.sh" and import this module into a source file where you need to use render.
import from "https://esm.sh/@rlmcneary2/weko-render";If you are bundling your source code you may need to use a dynamic import to
load the library like so:
async function main() {
await import("https://esm.sh/@rlmcneary2/weko-render");
}The script can also be loaded in an HTML file, typically as part of the <head>
element.
<head>
<script src="https://esm.sh/@rlmcneary2/weko-render" type="module"></script>
</head>To use Typescript during development you need to do three things.
- Install the package locally from npm under devDependencies:
npm i -D @rlmcneary2/weko-render. - Update the tsconfig.json file's
compilerOptions.pathswith the local installation of the package.
"paths": {
"@rlmcneary2/weko-render": ["./node_modules/@rlmcneary2/weko-render/src/index"]
}- Create a
.d.tsfile somewhere in a path processed by tsconfig.json that declares a module for the remote address.
// remote.d.ts
// Allow all module names starting with "https://". This will suppress TS errors.
declare module "https://*";
// Map the URL to all the exports from the locally installed package.
declare module "https://esm.sh/@rlmcneary2/weko-render" {
export * from "@rlmcneary2/weko-render";
}