https://github.com/tettusud/svelte-wc-layercake

A sample repo to try to use layercake as web component
https://github.com/tettusud/svelte-wc-layercake

Last synced: 14 days ago
JSON representation

A sample repo to try to use layercake as web component

• Host: GitHub
• URL: https://github.com/tettusud/svelte-wc-layercake
• Owner: tettusud
• Created: 2020-07-31T15:34:48.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-09-29T17:52:44.000Z (over 2 years ago)
• Last Synced: 2024-04-15T01:17:59.739Z (9 months ago)
• Language: HTML
• Size: 195 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Svelte Web component

  1.  Clone this repo and install dependencies

   ```

        npm install

   ```

   2. Run the application,

   ```

    npm run dev

   ```

   3. Access the application on the url displayed in the logs

# Explanation of the issue

  Building a web component in Svelte, while importing third party libraries for example **layercake** .

  As of now all components should have the tag,

  ```

    

  ```

  Since we do not have control over external libraries to have this tag, there is no way to import/make use of some of the wonderful libraries like **layercake** in our custom component.

# This branch

  You will get compilation error, **No custom element 'tag' option was specified**

  ```

bundles src/main.ts → public/build/bundle.js...

(!) Plugin svelte: No custom element 'tag' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. . To hide this warning, use 

node_modules/layercake/src/LayerCake.svelte

1: 

   ^

2: import { setContext } from 'svelte';

3: import { writable, derived } from 'svelte/store';

node_modules/layercake/src/layouts/Webgl.svelte

1: <script>

   ^

2: import { getContext, onMount, setContext } from 'svelte';

3: import { writable } from 'svelte/store';

node_modules/layercake/src/layouts/Svg.svelte

1: <script>

   ^

2: import { getContext } from 'svelte';

3: 

node_modules/layercake/src/layouts/Canvas.svelte

1: <script>

   ^

2: import { getContext, onMount, setContext } from 'svelte';

3: import { writable } from 'svelte/store';

node_modules/layercake/src/layouts/ScaledSvg.svelte

1: <script>

   ^

2: import { getContext } from 'svelte';

3: 

node_modules/layercake/src/layouts/Html.svelte

1: <script>

   ^

2: import { getContext } from 'svelte';

3: 

(!) Circular dependencies

node_modules/d3-interpolate/src/value.js -> node_modules/d3-interpolate/src/array.js -> node_modules/d3-interpolate/src/value.js

node_modules/d3-interpolate/src/value.js -> node_modules/d3-interpolate/src/object.js -> node_modules/d3-interpolate/src/value.js

created public/build/bundle.js in 1.6s

  ```