This package is now deprecated, please see the @ircam/sc-components for the new version of the library
set of web components for audio interfaces and rapid prototyping, created using the lit library.
http://ircam-ismm.github.io/simple-components/
npm install lit @ircam/simple-components --save
Note: this library has never been tested with other framework than lit
, any feedback is welcome.
Since v2, this package has moved to lit@2, which might cause issues if your application is using [email protected] and/or [email protected]
to update your app, see: https://lit.dev/docs/releases/upgrade/
if you don't want to update your app now, please fall back to version 1.x.x `npm install --save @ircam/[email protected]`
Each components lives in its own file and should be imported separately, e.g.
import '@babel/polyfill';
import { html, render } from 'lit/html.js';
import '@ircam/simple-components/sc-toggle.js'
render(html`
<sc-toggle
@change="${e => console.log(e)}"
></sc-toggle>
`, document.body);
see. documentation (http://ircam-ismm.github.io/simple-components/)
To support older browser, you should import webcomponentsjs/webcomponents-bundle.js
and ./vendors/lit/polyfill-support.js
A possible solution is to copy the file from your node_modules
folder into a directory
exposed by your server using postinstall scripts
In package.json
"scripts": {
"postinstall": "mkdir -p ./vendors && cp -R node_modules/@webcomponents/webcomponentsjs ./vendors/ && cp -R node_modules/lit ./vendors/",
}
<script defer src="./vendors/webcomponentsjs/webcomponents-bundle.js"></script>
<script defer src="./vendors/lit/polyfill-support.js"></script>
Such strategy as been implemented in the docs
directory.
These design aspects aim at simplifying future wrapping of the components in an editing tool.
All components must expose a width
and height
attribute, for squared components (e.g. <sc-bang>
and <sc-toggle>
) the last attribute set wins
- all components should at least expose an
@input
or a@change
event. - they can expose additional events, e.g. button
@press
and@release
- payload should always have
e.details.value
<sc-range>
<sc-multislider>
<sc-volume>
(slider and number w/ db and lin output)<sc-pan>
<sc-select>
<sc-radio>
<sc-dial>
(maybe we just have to accept some people like that sort of thing...)
- https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
- https://lit-element.polymer-project.org/guide/styles#example-theme
BSD-3-Clause