❤Nine Project Managers

    npm

    Sign UpSign In

    This package has been deprecated

    Author message:

    🚨 No longer maintained. Moved to [reallyland/really-elements](https://github.com/reallyland/really-elements). 🚨

    @reallyland/really-code-configurator
    TypeScript icon, indicating that this package has built-in type declarations

    0.6.0 • Public • Published

    @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)

    Keywords

    Install

    npm i @reallyland/really-code-configurator

    Repository

    Gitgithub.com/reallyland/really-code-configurator

    Homepage

    github.com/reallyland/really-code-configurator

    DownloadsWeekly Downloads

    6

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    50.3 kB

    Total Files

    15

    Last publish

    Collaborators

    • motss
    Try on RunKit
    Report malware