@reallyland/really-code-configurator

Configure and generate code snippet for custom element

Stats

StarsIssuesVersionUpdatedCreatedSize
@reallyland/really-code-configurator
000.6.02 years ago2 years agoMinified + gzip package size for @reallyland/really-code-configurator in KB

Readme

@reallyland/really-code-configurator

Configure and generate code snippet for custom element


Buy Me A Coffee tippin.me Follow me

Version lit-element Node version MIT License

Downloads Total downloads Packagephobia Bundlephobia

CircleCI Dependency Status

codebeat badge Codacy Badge Code of Conduct

Better element for the web

Table of contents

Pre-requisites

Installation

# Install via NPM
$ npm install @reallyland/really-code-configurator

Usage

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)

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.