Skip to content

Instantly share code, notes, and snippets.

@bitflower
Last active July 7, 2021 14:45
Show Gist options
  • Select an option

  • Save bitflower/9ebdae635e2a9f5b21ec9c423bf64fa8 to your computer and use it in GitHub Desktop.

Select an option

Save bitflower/9ebdae635e2a9f5b21ec9c423bf64fa8 to your computer and use it in GitHub Desktop.

Revisions

  1. bitflower renamed this gist Jul 7, 2021. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions vendor-shoelace-index.ts → shoelace.ts
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    // src/global/vendor/shoelace.ts

    import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
    import { setDefaultAnimation } from '@shoelace-style/shoelace/dist/utilities/animation-registry.js';
    import '@shoelace-style/shoelace/dist/components/avatar/avatar.js';
  2. bitflower revised this gist Jul 7, 2021. 1 changed file with 31 additions and 41 deletions.
    72 changes: 31 additions & 41 deletions vendor-shoelace-index.ts
    Original file line number Diff line number Diff line change
    @@ -1,44 +1,34 @@
    // src/vendor/shoelace/index.ts
    import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
    import { setDefaultAnimation } from '@shoelace-style/shoelace/dist/utilities/animation-registry.js';
    import '@shoelace-style/shoelace/dist/components/avatar/avatar.js';
    import '@shoelace-style/shoelace/dist/components/badge/badge.js';
    import '@shoelace-style/shoelace/dist/components/button/button.js';
    import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';
    import '@shoelace-style/shoelace/dist/components/checkbox/checkbox.js';
    import '@shoelace-style/shoelace/dist/components/details/details.js';
    import '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';
    import '@shoelace-style/shoelace/dist/components/icon/icon.js';
    import '@shoelace-style/shoelace/dist/components/input/input.js';
    import '@shoelace-style/shoelace/dist/components/menu/menu.js';
    import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
    import '@shoelace-style/shoelace/dist/components/skeleton/skeleton.js';
    import '@shoelace-style/shoelace/dist/components/spinner/spinner.js';

    import { Config } from '@stencil/core';
    import { sass } from '@stencil/sass';
    import alias from '@rollup/plugin-alias';
    import nodePolyfills from 'rollup-plugin-node-polyfills';
    export function setup(): void {
    // Set the base path to the folder you copied Shoelace's assets to
    setBasePath('/assets/shoelace');

    const copies = [
    {
    src: '../node_modules/@shoelace-style/shoelace/dist/assets',
    dest: 'assets/shoelace/assets'
    }
    ];

    export const config: Config = {
    namespace: 'bla',
    taskQueue: 'async',
    outputTargets: [
    {
    type: 'dist',
    copy: copies
    },
    {
    type: 'www',
    serviceWorker: {
    skipWaiting: true,
    clientsClaim: true
    },
    copy: copies
    },
    {
    type: 'stats',
    file: 'stats.json'
    },
    {
    type: 'docs-json',
    file: 'components.json'
    // Change the default animation for all sl-details
    setDefaultAnimation('details.show', {
    keyframes: [],
    options: {
    duration: 0
    }
    });
    setDefaultAnimation('details.hide', {
    keyframes: [],
    options: {
    duration: 0
    }
    ],
    globalScript: 'src/global/app.ts',
    globalStyle: 'src/global/app.scss',
    plugins: [sass()],
    autoprefixCss: true
    };
    });
    }
  3. bitflower revised this gist Jul 7, 2021. 3 changed files with 84 additions and 32 deletions.
    2 changes: 2 additions & 0 deletions global.ts → app.ts
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    // src/global/app.ts

    import { setup } from './vendor/shoelace';

    export default async function (): Promise<void> {
    42 changes: 42 additions & 0 deletions stencil.config.ts
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    import { Config } from '@stencil/core';
    import { sass } from '@stencil/sass';
    import alias from '@rollup/plugin-alias';
    import nodePolyfills from 'rollup-plugin-node-polyfills';

    const copies = [
    {
    src: '../node_modules/@shoelace-style/shoelace/dist/assets',
    dest: 'assets/shoelace/assets'
    }
    ];

    export const config: Config = {
    namespace: 'bla',
    taskQueue: 'async',
    outputTargets: [
    {
    type: 'dist',
    copy: copies
    },
    {
    type: 'www',
    serviceWorker: {
    skipWaiting: true,
    clientsClaim: true
    },
    copy: copies
    },
    {
    type: 'stats',
    file: 'stats.json'
    },
    {
    type: 'docs-json',
    file: 'components.json'
    }
    ],
    globalScript: 'src/global/app.ts',
    globalStyle: 'src/global/app.scss',
    plugins: [sass()],
    autoprefixCss: true
    };
    72 changes: 40 additions & 32 deletions vendor-shoelace-index.ts
    Original file line number Diff line number Diff line change
    @@ -1,36 +1,44 @@
    // vendor/shoelace/index.ts
    // src/vendor/shoelace/index.ts

    import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
    import { setDefaultAnimation } from '@shoelace-style/shoelace/dist/utilities/animation-registry.js';
    import '@shoelace-style/shoelace/dist/components/avatar/avatar.js';
    import '@shoelace-style/shoelace/dist/components/badge/badge.js';
    import '@shoelace-style/shoelace/dist/components/button/button.js';
    import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';
    import '@shoelace-style/shoelace/dist/components/checkbox/checkbox.js';
    import '@shoelace-style/shoelace/dist/components/details/details.js';
    import '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';
    import '@shoelace-style/shoelace/dist/components/icon/icon.js';
    import '@shoelace-style/shoelace/dist/components/input/input.js';
    import '@shoelace-style/shoelace/dist/components/menu/menu.js';
    import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
    import '@shoelace-style/shoelace/dist/components/skeleton/skeleton.js';
    import '@shoelace-style/shoelace/dist/components/spinner/spinner.js';
    import { Config } from '@stencil/core';
    import { sass } from '@stencil/sass';
    import alias from '@rollup/plugin-alias';
    import nodePolyfills from 'rollup-plugin-node-polyfills';

    export function setup(): void {
    // Set the base path to the folder you copied Shoelace's assets to
    setBasePath('/assets/shoelace');
    const copies = [
    {
    src: '../node_modules/@shoelace-style/shoelace/dist/assets',
    dest: 'assets/shoelace/assets'
    }
    ];

    // Change the default animation for all sl-details
    setDefaultAnimation('details.show', {
    keyframes: [],
    options: {
    duration: 0
    export const config: Config = {
    namespace: 'bla',
    taskQueue: 'async',
    outputTargets: [
    {
    type: 'dist',
    copy: copies
    },
    {
    type: 'www',
    serviceWorker: {
    skipWaiting: true,
    clientsClaim: true
    },
    copy: copies
    },
    {
    type: 'stats',
    file: 'stats.json'
    },
    {
    type: 'docs-json',
    file: 'components.json'
    }
    });
    setDefaultAnimation('details.hide', {
    keyframes: [],
    options: {
    duration: 0
    }
    });
    }
    ],
    globalScript: 'src/global/app.ts',
    globalStyle: 'src/global/app.scss',
    plugins: [sass()],
    autoprefixCss: true
    };
  4. bitflower created this gist Jul 7, 2021.
    5 changes: 5 additions & 0 deletions global.ts
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    import { setup } from './vendor/shoelace';

    export default async function (): Promise<void> {
    setup();
    }
    36 changes: 36 additions & 0 deletions vendor-shoelace-index.ts
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    // vendor/shoelace/index.ts

    import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
    import { setDefaultAnimation } from '@shoelace-style/shoelace/dist/utilities/animation-registry.js';
    import '@shoelace-style/shoelace/dist/components/avatar/avatar.js';
    import '@shoelace-style/shoelace/dist/components/badge/badge.js';
    import '@shoelace-style/shoelace/dist/components/button/button.js';
    import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';
    import '@shoelace-style/shoelace/dist/components/checkbox/checkbox.js';
    import '@shoelace-style/shoelace/dist/components/details/details.js';
    import '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';
    import '@shoelace-style/shoelace/dist/components/icon/icon.js';
    import '@shoelace-style/shoelace/dist/components/input/input.js';
    import '@shoelace-style/shoelace/dist/components/menu/menu.js';
    import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
    import '@shoelace-style/shoelace/dist/components/skeleton/skeleton.js';
    import '@shoelace-style/shoelace/dist/components/spinner/spinner.js';

    export function setup(): void {
    // Set the base path to the folder you copied Shoelace's assets to
    setBasePath('/assets/shoelace');

    // Change the default animation for all sl-details
    setDefaultAnimation('details.show', {
    keyframes: [],
    options: {
    duration: 0
    }
    });
    setDefaultAnimation('details.hide', {
    keyframes: [],
    options: {
    duration: 0
    }
    });
    }