kreo

Install Homebrew:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install jEnv using Homebrew:

brew install jenv

Add the cask-versions tap to Homebrew:

kreo

@use 'sass:math';
@mixin _flex-gap($gap, $row: true) {
  $margin: math.div($gap, 2);
  $transform: -$margin;
  @if $row {
    margin-left: $transform;
    margin-right: $transform;
  } @else {
    margin-top: $transform;
    margin-bottom: $transform;

kreo

/**
 * Returns current active element, including shadow dom
 *
 * @return element or null
 */
export function getNativeFocused(documentRef: Document): Element | null {
    if (!documentRef.activeElement || !documentRef.activeElement.shadowRoot) {
        return documentRef.activeElement;
    }

kreo

import { h, hydrate } from 'preact';

let C = 0;
export function Root({ href, data, children }) {
  let json = data && JSON.stringify(data);
  let id = 'root:'+++C;
  return [
    h(`!--${id}--`),
    children,
    h('component-root', { href, id },

kreo

/**
 * Usage:
 * class FancyButton extends HTMLElement {
 *   constructor() {
 *     super();
 *     ensureShadowRoot(el);
 *     // if a declarative shadow root was present, it'll be here:
 *     console.log(this.shadowRoot);
 *   }
 * }

kreo

if (!Element.prototype.getInnerHTML) {
  Element.prototype.getInnerHTML = function(opts) {
    var html = this.innerHTML;
    if (!opts || !opts.includeShadowRoots) return html;
    var m = new (self.WeakMap || Map)();
    for (var c of (opts.closedRoots || [])) m.set(c.host, c);
    var p = [];
    function walk(node) {
      var c, shadow = node.shadowRoot || m.get(node);
      if (shadow) p.push(node.innerHTML, `<template shadowroot="${shadow.mode}">${shadow.innerHTML}</template>`);

kreo

My stencil + storybook setup

1. Setup your stencil project as usual
2. Add storybook: npx -p @storybook/cli sb init --type react (we use react so you can use JSX inside your stories)
3. Add required deps: npm add @babel/plugin-syntax-import-meta @open-wc/webpack-import-meta-loader webpack-merge -D
4. preview.js:

import { defineCustomElements } from "../dist/esm/loader";

kreo

import sass from "node-sass";
import fs from "fs";
import process from "process";
import nodeSassImport from "node-sass-import";
import path from "path";

const defaultOpts = {
  srcDir: "./src",
  outDir: "./dist"
};

kreo

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

/// Map of breakpoints
/// @type Map
$breakpoints: (
  'small': '(min-width: 860px)',
  'medium': '(min-width: 1000px)',

kreo

const { exec } = require('child_process')
const { promisify } = require('util')
const chalk = require('chalk')

// See: https://docs.npmjs.com/about-audit-reports#severity
const SEVERITY_LEVELS = ['low', 'moderate', 'high', 'critical']
const SEVERITY_THRESHOLD = 'critical'
const run = promisify(exec)

// Get the output of a command. If the command exits with a non-zero code, try