How to use slim-js - 10 common examples
To help you get started, we’ve selected a few slim-js examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
ShavitCohen / redux-frmework-agnostic-technique / implementations / slimjs / src / app / app.js View on Github 
import '../helpers/shady-css.js'
// Slimjs directives (i.e. repeat, if, etc.)
import 'slim-js/directives/all.js'
// import custom elements
import './components/header.js'
import './components/show-card.js'
import './components/show-info.js'
import './components/cast-memeber.js'
import AppTemplate from './app.template.html';
// application root custom element
@tag('awesome-app')
@template(AppTemplate)
@useShadow(true)
class App extends Slim {
cleanupCards () {
this.findAll('show-card').forEach(card => card.removeAttribute('selected'));
}
clear () {
this.shows = [];
}
selectShow ({target: card}) {
this.cleanupCards();
card.setAttribute('selected', '');
store.dispatch(searchActions.tvShowSelected(card.show));// Slimjs directives (i.e. repeat, if, etc.)
import 'slim-js/directives/all.js'
// import custom elements
import './components/header.js'
import './components/show-card.js'
import './components/show-info.js'
import './components/cast-memeber.js'
import AppTemplate from './app.template.html';
// application root custom element
@tag('awesome-app')
@template(AppTemplate)
@useShadow(true)
class App extends Slim {
cleanupCards () {
this.findAll('show-card').forEach(card => card.removeAttribute('selected'));
}
clear () {
this.shows = [];
}
selectShow ({target: card}) {
this.cleanupCards();
card.setAttribute('selected', '');
store.dispatch(searchActions.tvShowSelected(card.show));
this.leftTransform = 25 - card.offsetLeft;// Slimjs directives (i.e. repeat, if, etc.)
import 'slim-js/directives/all.js'
// import custom elements
import './components/header.js'
import './components/show-card.js'
import './components/show-info.js'
import './components/cast-memeber.js'
import AppTemplate from './app.template.html';
// application root custom element
@tag('awesome-app')
@template(AppTemplate)
@useShadow(true)
class App extends Slim {
cleanupCards () {
this.findAll('show-card').forEach(card => card.removeAttribute('selected'));
}
clear () {
this.shows = [];
}
selectShow ({target: card}) {
this.cleanupCards();
card.setAttribute('selected', '');
store.dispatch(searchActions.tvShowSelected(card.show));
this.leftTransform = 25 - card.offsetLeft;
this.topTransform = 15 - card.offsetTop;import { tag, template, useShadow } from "slim-js/Decorators";
@tag('show-card')
@template(/*html*/`
<style>
:host-context([has-selection]) {
opacity: 0.06;
pointer-events: none;
filter: blur(3px);
}
:host([selected]) {
opacity: 1;
filter: blur(0);
}
:host {
display: inline-flex;
background-color: white;
color: black;
padding: 1rem;</style>import { Slim } from 'slim-js'
import { tag, template, useShadow } from 'slim-js/Decorators'
import { throttle } from '../control/utils/throttle'
import { calculateCircle } from '../helpers/calculateCircle'
@tag('pointer-overlay')
@useShadow(true)
@template(`
<style>
div {
pointer-events: none;
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
z-index: 9999;
}
path {
fill: rgba(0, 0, 0, 0.5);
fill-rule: evenodd;</style>import { tag, template, useShadow } from "slim-js/Decorators";
import { Slim } from "slim-js";
import { searchActions, store } from 'redux-logic-layer';
import { debounce } from "../../helpers/debounce";
@tag('app-header')
@template(/*html*/`
<style>
:host {
line-height: 1.2;
display: flex;
flex-direction: row;
align-items: center;
background: var(--accent-color);
color: var(--header-text-color);
letter-spacing: 0.08rem;
padding: 0 1rem 0 1rem;
box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.5);
position: sticky;
top: 0;
}
</style>import { tag, template, useShadow } from "slim-js/Decorators";
import { store, showInfoActions } from 'redux-logic-layer';
import { connect } from "../store/connect";
@tag('show-info')
@template(/*html*/`
<style>
:host {
transform: translate3d(150px, 0, 0);
padding-right: 2rem;
color: #444;
transition: 850ms cubic-bezier(0.645, 0.045, 0.355, 1);
opacity: 0;
}
:host-context([has-selection]) {
transform: translate3d(0px, 0, 0);
color: #efefef;
opacity: 1;
}
a:visited, a:hover, a {
color: inherit;</style>import { tag, template, useShadow } from "slim-js/Decorators";
import { Slim } from "slim-js";
import { searchActions, store } from 'redux-logic-layer';
import { debounce } from "../../helpers/debounce";
@tag('app-header')
@template(/*html*/`
<style>
:host {
line-height: 1.2;
display: flex;
flex-direction: row;
align-items: center;
background: var(--accent-color);
color: var(--header-text-color);
letter-spacing: 0.08rem;
padding: 0 1rem 0 1rem;
box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.5);
position: sticky;
top: 0;
}
:host * {</style>import { Slim } from 'slim-js'
import { tag, template, useShadow } from 'slim-js/Decorators'
import { throttle } from '../control/utils/throttle'
import { calculateCircle } from '../helpers/calculateCircle'
@tag('pointer-overlay')
@useShadow(true)
@template(`
<style>
div {
pointer-events: none;
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
z-index: 9999;
}
path {
fill: rgba(0, 0, 0, 0.5);
fill-rule: evenodd;
stroke: none;
opacity: 0;</style>import { tag, template, useShadow } from "slim-js/Decorators";
import { store, showInfoActions } from 'redux-logic-layer';
import { connect } from "../store/connect";
@tag('show-info')
@template(/*html*/`
<style>
:host {
transform: translate3d(150px, 0, 0);
padding-right: 2rem;
color: #444;
transition: 850ms cubic-bezier(0.645, 0.045, 0.355, 1);
opacity: 0;
}
:host-context([has-selection]) {
transform: translate3d(0px, 0, 0);
color: #efefef;
opacity: 1;
}
a:visited, a:hover, a {
color: inherit;
text-decoration: none;</style>
