@reallyland/really-code-configurator
Configure and generate code snippet for custom element
Better element for the web
Table of contents
Pre-requisites
-
Java 8 (
web-component-testerworks without any issue with Java 8) - Node.js >= 8.16.0
- NPM >= 6.4.1 (NPM comes with Node.js, no separate installation is required.)
- (Optional for non-VS Code users) Syntax Highlighting for lit-html in VS Code
-
web-component-tester >= 6.9.2 (For running tests, it's recommended to install globally on your system due to its insanely huge install size by running
npm i -g web-component-tester.)
Installation
# Install via NPM
$ npm install @reallyland/really-code-configuratorUsage
properties.config.ts
import { PropertyValue } from '@reallyland/really-code-configurator';
const properties: PropertyValue[] = [
{
name: 'propertyString',
value: 'property',
type: 'string',
},
{
name: 'propertyNumber',
value: 0,
type: 'number',
},
{
name: 'propertyBoolean',
value: true,
type: 'boolean',
},
{
name: 'propertyWithSelectableOptions',
value: 'option-1',
type: 'string',
options: [
{
label: 'option-1',
value: 'option-1',
},
{
label: 'option-2',
value: 'option-2',
},
{
label: 'option-3',
value: 'option-3',
},
],
},
];
const cssProperties: PropertyValue[] = [
{
name: '--test-property-width',
value: '2px',
}
];
export { properties, cssProperties };index.html
<html>
<head>
<script type="module">
import '/path/to/test-property.js';
import '/path/to/@reallyland/really-code-configurator.js';
import { properties, cssProperties } from '/path/to/properties.config.js';
const configuratorEl = document.createElement('.configurator');
/** Load `properties` and `cssProperties` */
if (configuratorEl) {
configuratorEl.properties = properties;
configuratorEl.cssProperties = cssProperties;
}
</script>
</head>
<body>
<really-code-configurator class="configurator" customelement="test-property">
<test-property></test-property>
</really-code-configurator>
</body>
</html>Browser compatibility
really-code-configurator works in all major browsers (Chrome, Firefox, IE, Edge, Safari, and Opera).
Heavily tested on the following browsers:
| Name | OS |
|---|---|
| Edge 17 | Windows 10 |
| Edge 15 | Windows 10 |
| Internet Explorer 11 | Windows 10 |
| Safari 10.1 | Mac OS 10.12 |
| Safari 9 | Mac OS X 10.11 |
| Firefox 62 (w/o native Shadow DOM) | macOS Mojave (10.14) |
| Chrome 69 (WRE 2019) | Windows 10 |
API Reference
Demo
Coming soon
License
MIT License © Rong Sen Ng (motss)