❤Nonsense Poetry Manager

npm

Sign UpSign In
Have ideas to improve npm?Join in the discussion! »

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

DownloadsWeekly Downloads

10

Version

0.6.0

License

MIT

Unpacked Size

50.3 kB

Total Files

15

Homepage

github.com/reallyland/really-code-configurator

Repository

Gitgithub.com/reallyland/really-code-configurator

Last publish

Collaborators

  • avatar
Try on RunKit
Report malware