@reallyland/really-code-configurator
Configure and generate code snippet for custom element
!tippin.metippin-me-badgetippin-me-url
!Follow mefollow-me-badgefollow-me-url!Versionversion-badgeversion-url !lit-elementlit-element-version-badgelit-element-url !Node versionnode-version-badgenode-version-url !MIT Licensemit-license-badgemit-license-url
!Downloadsdownloads-badgedownloads-url !Total downloadstotal-downloads-badgedownloads-url !Packagephobiapackagephobia-badgepackagephobia-url !Bundlephobiabundlephobia-badgebundlephobia-url
!CircleCIcircleci-badgecircleci-url !Dependency Statusdaviddm-badgedaviddm-url
!codebeat badgecodebeat-badgecodebeat-url !Codacy Badgecodacy-badgecodacy-url !Code of Conductcoc-badgecoc-url
Better element for the web
Table of contents
Pre-requisites
- Java 8java-url (
web-component-testerworks without any issue with Java 8) - Node.jsnodejs-url >= 8.16.0
- NPMnpm-url >= 6.4.1 (NPMnpm-url comes with Node.jsnodejs-url, no separate installation is required.)
- (Optional for non-VS Codevscode-url users) Syntax Highlighting for lit-html in VS Codevscode-lit-html-url
- web-component-testerweb-component-tester-url >= 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.tsimport { 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 2019wre-2019-url) | Windows 10 |
