@splinetool/viewer 0.0.3 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/build/constants.d.ts +1 -0
  2. package/build/spline-viewer.d.ts +48 -0
  3. package/package.json +13 -8
  4. package/src/constants.ts +0 -1
  5. package/src/spline-viewer.ts +0 -221
  6. package/src/test/spline-viewer_test.ts +0 -43
package/build/constants.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const HAS_INTERSECTION_OBSERVER: boolean;
package/build/spline-viewer.d.ts ADDED
@@ -0,0 +1,48 @@
1
+ import { Application } from '@splinetool/runtime';
2
+ import { LitElement } from 'lit';
3
+ export declare type LoadingType = 'auto' | 'lazy' | 'eager';
4
+ /**
5
+ * Spline scene viewer
6
+ */
7
+ export declare class SplineViewer extends LitElement {
8
+ static styles: import("lit").CSSResult;
9
+ /**
10
+ * The url of the .splinecode file as exported from Spline Editor.
11
+ */
12
+ url: string | null;
13
+ /**
14
+ * The width of the canvas
15
+ */
16
+ width: number | undefined;
17
+ /**
18
+ * The height of the canvas
19
+ */
20
+ height: number | undefined;
21
+ /**
22
+ * Background color
23
+ */
24
+ background: string | undefined;
25
+ /**
26
+ * Background color
27
+ */
28
+ loading: LoadingType;
29
+ protected _spline: Application;
30
+ protected _intersectionObserver: IntersectionObserver | null;
31
+ protected _isElementInViewport: boolean;
32
+ protected _loaded: boolean;
33
+ protected _container: HTMLElement;
34
+ protected _canvas: HTMLCanvasElement;
35
+ protected _logo: HTMLElement;
36
+ private _loadedUrl;
37
+ constructor();
38
+ protected load(): void;
39
+ updated(changedProperties: Map<string | number | symbol, any>): void;
40
+ connectedCallback(): void;
41
+ disconnectedCallback(): void;
42
+ private _handleResize;
43
+ }
44
+ declare global {
45
+ interface HTMLElementTagNameMap {
46
+ 'spline-viewer': SplineViewer;
47
+ }
48
+ }
package/package.json CHANGED
@@ -1,23 +1,28 @@
1
1
  {
2
2
  "name": "@splinetool/viewer",
3
- "version": "0.0.3",
3
+ "version": "0.0.4",
4
4
  "description": "Spline viewer",
5
- "main": "build/viewer.js",
6
- "module": "src/spline-viewer.ts",
7
- "typings": "viewer.d.ts",
8
- "types": "viewer.d.ts",
9
5
  "type": "module",
6
+ "main": "./build/viewer.js",
7
+ "module": "./build/viewer.js",
8
+ "types": "./build/viewer.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./build/viewer.d.ts",
12
+ "import": "./build/viewer.js",
13
+ "require": "./build/viewer.cjs"
14
+ }
15
+ },
10
16
  "files": [
11
- "src",
12
17
  "build",
13
18
  "README.md"
14
19
  ],
15
20
  "scripts": {
16
21
  "start": "cross-env NODE_ENV=development node --experimental-json-modules ./esbuild.mjs",
17
- "build": "cross-env NODE_ENV=production node --experimental-json-modules ./esbuild.mjs",
22
+ "build": "cross-env NODE_ENV=production node --experimental-json-modules ./esbuild.mjs && yarn build-types",
23
+ "build-types": "tsc --skipLibCheck --isolatedModules false --noEmit false --emitDeclarationOnly --declaration --outDir build/ --declarationMap false",
18
24
  "format": "prettier src/ --write",
19
25
  "typecheck": "tsc",
20
- "types": "tsc --incremental",
21
26
  "example": "vite",
22
27
  "test": "npm run test:dev && npm run test:prod",
23
28
  "test:dev": "wtr src",
package/src/constants.ts DELETED
@@ -1 +0,0 @@
1
- export const HAS_INTERSECTION_OBSERVER = window.IntersectionObserver != null;
package/src/spline-viewer.ts DELETED
@@ -1,221 +0,0 @@
1
- import { Application } from '@splinetool/runtime';
2
- import { LitElement, html, css, render } from 'lit';
3
- import { customElement, property } from 'lit/decorators.js';
4
- import { HAS_INTERSECTION_OBSERVER } from './constants';
5
-
6
- const template = html` <div id="container">
7
- <canvas id="spline"></canvas>
8
- <a id="logo" href="https://spline.design">
9
- <span></span>
10
- <svg
11
- width="89"
12
- height="13"
13
- viewBox="0 0 89 13"
14
- fill="none"
15
- xmlns="http://www.w3.org/2000/svg"
16
- >
17
- <path
18
- d="M0.966 10V1.276H3.894C4.53 1.276 5.05 1.374 5.454 1.57C5.858 1.766 6.156 2.028 6.348 2.356C6.544 2.68 6.642 3.044 6.642 3.448C6.642 3.972 6.494 4.396 6.198 4.72C5.906 5.04 5.504 5.22 4.992 5.26C5.4 5.288 5.746 5.378 6.03 5.53C6.318 5.678 6.536 5.894 6.684 6.178C6.836 6.462 6.912 6.822 6.912 7.258C6.912 7.882 6.784 8.398 6.528 8.806C6.276 9.21 5.928 9.51 5.484 9.706C5.04 9.902 4.532 10 3.96 10H0.966ZM2.346 8.698H3.678C4.27 8.698 4.708 8.606 4.992 8.422C5.28 8.238 5.424 7.872 5.424 7.324C5.424 6.912 5.346 6.618 5.19 6.442C5.034 6.262 4.824 6.15 4.56 6.106C4.296 6.058 4.002 6.034 3.678 6.034H2.346V8.698ZM2.346 4.882H3.636C4.024 4.882 4.328 4.834 4.548 4.738C4.768 4.638 4.922 4.492 5.01 4.3C5.102 4.108 5.148 3.87 5.148 3.586C5.152 3.206 5.012 2.942 4.728 2.794C4.448 2.642 4.082 2.566 3.63 2.566H2.346V4.882ZM10.2126 10.132C9.64456 10.132 9.18856 9.934 8.84456 9.538C8.50056 9.142 8.32856 8.574 8.32856 7.834V3.448H9.74456V7.456C9.74456 7.776 9.78056 8.04 9.85256 8.248C9.92456 8.456 10.0386 8.608 10.1946 8.704C10.3506 8.8 10.5526 8.848 10.8006 8.848C11.1006 8.848 11.3706 8.762 11.6106 8.59C11.8546 8.414 12.0266 8.216 12.1266 7.996V3.448H13.5426V10H12.3366L12.1746 7.528L12.2826 8.026C12.2346 8.386 12.1386 8.726 11.9946 9.046C11.8546 9.366 11.6406 9.628 11.3526 9.832C11.0686 10.032 10.6886 10.132 10.2126 10.132ZM15.3263 10V3.448H16.7603L16.7423 10H15.3263ZM16.0523 2.482C15.7923 2.482 15.5723 2.392 15.3923 2.212C15.2123 2.028 15.1223 1.794 15.1223 1.51C15.1223 1.23 15.2123 1.002 15.3923 0.826C15.5723 0.65 15.7923 0.562 16.0523 0.562C16.3043 0.562 16.5203 0.65 16.7003 0.826C16.8843 1.002 16.9763 1.23 16.9763 1.51C16.9763 1.794 16.8843 2.028 16.7003 2.212C16.5203 2.392 16.3043 2.482 16.0523 2.482ZM18.549 10V0.663999H19.965V10H18.549ZM23.6579 10.096C23.1379 10.096 22.7319 9.964 22.4399 9.7C22.1519 9.432 22.0079 9.05 22.0079 8.554V5.242C22.0079 5.11 22.0359 4.992 22.0919 4.888C22.1479 4.78 22.2299 4.712 22.3379 4.684L22.0079 3.712V3.538L22.3259 1.576H23.4059V8.2C23.4059 8.432 23.4559 8.594 23.5559 8.686C23.6599 8.778 23.8519 8.824 24.1319 8.824C24.3119 8.824 24.4779 8.824 24.6299 8.824C24.7819 8.82 24.9199 8.816 25.0439 8.812V10.018C24.8359 10.054 24.6079 10.076 24.3599 10.084C24.1119 10.092 23.8779 10.096 23.6579 10.096ZM21.1499 4.684V3.448H25.0559V4.684H21.1499ZM29.7628 10L27.7768 3.454H29.3308L30.1468 6.706L30.5488 8.794L30.6208 8.8L30.9448 6.7L31.7308 3.454H33.5128L34.2868 6.712L34.6048 8.866L34.6948 8.86L35.1028 6.712L35.9188 3.454H37.4668L35.4868 10H33.8308L33.0448 6.88L32.6788 4.984H32.5768L32.1928 6.886L31.4128 10H29.7628ZM38.5295 10V3.448H39.9635L39.9455 10H38.5295ZM39.2555 2.482C38.9955 2.482 38.7755 2.392 38.5955 2.212C38.4155 2.028 38.3255 1.794 38.3255 1.51C38.3255 1.23 38.4155 1.002 38.5955 0.826C38.7755 0.65 38.9955 0.562 39.2555 0.562C39.5075 0.562 39.7235 0.65 39.9035 0.826C40.0875 1.002 40.1795 1.23 40.1795 1.51C40.1795 1.794 40.0875 2.028 39.9035 2.212C39.7235 2.392 39.5075 2.482 39.2555 2.482ZM43.6149 10.096C43.0949 10.096 42.6889 9.964 42.3969 9.7C42.1089 9.432 41.9649 9.05 41.9649 8.554V5.242C41.9649 5.11 41.9929 4.992 42.0489 4.888C42.1049 4.78 42.1869 4.712 42.2949 4.684L41.9649 3.712V3.538L42.2829 1.576H43.3629V8.2C43.3629 8.432 43.4129 8.594 43.5129 8.686C43.6169 8.778 43.8089 8.824 44.0889 8.824C44.2689 8.824 44.4349 8.824 44.5869 8.824C44.7389 8.82 44.8769 8.816 45.0009 8.812V10.018C44.7929 10.054 44.5649 10.076 44.3169 10.084C44.0689 10.092 43.8349 10.096 43.6149 10.096ZM41.1069 4.684V3.448H45.0129V4.684H41.1069ZM46.3339 10V0.663999H47.7379V3.454L47.6419 5.32L47.6959 5.848L47.6239 5.422C47.6719 5.062 47.7639 4.722 47.8999 4.402C48.0399 4.078 48.2499 3.816 48.5299 3.616C48.8139 3.416 49.1939 3.316 49.6699 3.316C50.2899 3.316 50.7679 3.51 51.1039 3.898C51.4439 4.282 51.6139 4.87 51.6139 5.662V10H50.1919V6.154C50.1919 5.598 50.1099 5.2 49.9459 4.96C49.7819 4.72 49.4879 4.6 49.0639 4.6C48.7719 4.6 48.5079 4.698 48.2719 4.894C48.0399 5.086 47.8639 5.3 47.7439 5.536V10H46.3339ZM58.1494 10.12C57.5094 10.12 56.9554 10.018 56.4874 9.814C56.0194 9.61 55.6554 9.304 55.3954 8.896C55.1354 8.484 54.9994 7.968 54.9874 7.348H56.3554C56.3714 7.684 56.4534 7.966 56.6014 8.194C56.7534 8.422 56.9654 8.592 57.2374 8.704C57.5134 8.816 57.8454 8.872 58.2334 8.872C58.6054 8.872 58.9094 8.828 59.1454 8.74C59.3814 8.652 59.5554 8.528 59.6674 8.368C59.7794 8.204 59.8354 8.012 59.8354 7.792C59.8354 7.552 59.7674 7.35 59.6314 7.186C59.4954 7.018 59.2794 6.862 58.9834 6.718C58.6914 6.57 58.3034 6.412 57.8194 6.244C57.3194 6.072 56.8814 5.862 56.5054 5.614C56.1334 5.366 55.8434 5.072 55.6354 4.732C55.4314 4.388 55.3294 3.986 55.3294 3.526C55.3294 2.75 55.5834 2.158 56.0914 1.75C56.5994 1.342 57.2954 1.138 58.1794 1.138C58.7914 1.138 59.2874 1.232 59.6674 1.42C60.0474 1.608 60.3334 1.886 60.5254 2.254C60.7214 2.618 60.8514 3.07 60.9154 3.61H59.5414C59.5054 3.334 59.4314 3.106 59.3194 2.926C59.2074 2.746 59.0534 2.612 58.8574 2.524C58.6654 2.432 58.4234 2.386 58.1314 2.386C57.6794 2.386 57.3314 2.478 57.0874 2.662C56.8434 2.842 56.7214 3.112 56.7214 3.472C56.7214 3.676 56.7594 3.862 56.8354 4.03C56.9154 4.198 57.0774 4.364 57.3214 4.528C57.5694 4.692 57.9414 4.872 58.4374 5.068C58.8214 5.22 59.1814 5.366 59.5174 5.506C59.8574 5.642 60.1554 5.8 60.4114 5.98C60.6714 6.16 60.8754 6.384 61.0234 6.652C61.1714 6.92 61.2474 7.26 61.2514 7.672C61.2594 8.464 60.9994 9.07 60.4714 9.49C59.9474 9.91 59.1734 10.12 58.1494 10.12ZM65.5797 10.072C65.1477 10.072 64.8037 10 64.5477 9.856C64.2917 9.712 64.1037 9.544 63.9837 9.352C63.8637 9.156 63.7877 8.984 63.7557 8.836L63.2757 8.86L63.8337 8.386C63.8617 8.486 63.9237 8.584 64.0197 8.68C64.1157 8.772 64.2557 8.848 64.4397 8.908C64.6237 8.964 64.8497 8.992 65.1177 8.992C65.5657 8.992 65.9337 8.818 66.2217 8.47C66.5137 8.122 66.6597 7.54 66.6597 6.724C66.6597 6.02 66.5237 5.48 66.2517 5.104C65.9797 4.724 65.6317 4.534 65.2077 4.534C64.9077 4.534 64.6597 4.576 64.4637 4.66C64.2717 4.744 64.1257 4.842 64.0257 4.954C63.9257 5.066 63.8617 5.166 63.8337 5.254V4.804C63.8417 4.672 63.8757 4.524 63.9357 4.36C63.9997 4.192 64.1017 4.03 64.2417 3.874C64.3857 3.714 64.5737 3.584 64.8057 3.484C65.0417 3.38 65.3337 3.328 65.6817 3.328C66.2097 3.328 66.6537 3.47 67.0137 3.754C67.3737 4.038 67.6457 4.428 67.8297 4.924C68.0177 5.416 68.1117 5.976 68.1117 6.604C68.1117 7.184 68.0397 7.692 67.8957 8.128C67.7557 8.56 67.5637 8.92 67.3197 9.208C67.0797 9.496 66.8097 9.712 66.5097 9.856C66.2097 10 65.8997 10.072 65.5797 10.072ZM62.4237 12.418V3.448H63.8157L63.8337 4.354V8.44L63.7557 8.836L63.8337 10.006V12.418H62.4237ZM69.4787 10V0.663999H70.8947V10H69.4787ZM72.6896 10V3.448H74.1236L74.1056 10H72.6896ZM73.4156 2.482C73.1556 2.482 72.9356 2.392 72.7556 2.212C72.5756 2.028 72.4856 1.794 72.4856 1.51C72.4856 1.23 72.5756 1.002 72.7556 0.826C72.9356 0.65 73.1556 0.562 73.4156 0.562C73.6676 0.562 73.8836 0.65 74.0636 0.826C74.2476 1.002 74.3396 1.23 74.3396 1.51C74.3396 1.794 74.2476 2.028 74.0636 2.212C73.8836 2.392 73.6676 2.482 73.4156 2.482ZM75.9003 10V3.448H77.1123L77.2683 5.92L77.1663 5.422C77.2143 5.062 77.3083 4.722 77.4483 4.402C77.5923 4.078 77.8063 3.816 78.0903 3.616C78.3743 3.416 78.7543 3.316 79.2303 3.316C79.8503 3.316 80.3303 3.51 80.6703 3.898C81.0103 4.282 81.1803 4.87 81.1803 5.662V10H79.7643V6.154C79.7643 5.778 79.7263 5.476 79.6503 5.248C79.5783 5.02 79.4603 4.856 79.2963 4.756C79.1323 4.652 78.9143 4.6 78.6423 4.6C78.3463 4.6 78.0763 4.688 77.8323 4.864C77.5923 5.036 77.4203 5.232 77.3163 5.452V10H75.9003ZM85.5704 10.09C84.9384 10.09 84.3904 9.962 83.9264 9.706C83.4664 9.446 83.1124 9.064 82.8644 8.56C82.6164 8.056 82.4924 7.438 82.4924 6.706C82.4924 5.994 82.6224 5.386 82.8824 4.882C83.1464 4.374 83.5084 3.988 83.9684 3.724C84.4284 3.456 84.9564 3.322 85.5524 3.322C86.1404 3.322 86.6424 3.438 87.0584 3.67C87.4784 3.902 87.7984 4.246 88.0184 4.702C88.2384 5.154 88.3484 5.71 88.3484 6.37C88.3484 6.498 88.3444 6.604 88.3364 6.688C88.3324 6.772 88.3264 6.872 88.3184 6.988H83.9024C83.9384 7.656 84.1024 8.148 84.3944 8.464C84.6864 8.776 85.0444 8.932 85.4684 8.932C85.8644 8.932 86.1664 8.848 86.3744 8.68C86.5864 8.508 86.7224 8.316 86.7824 8.104H88.1504C88.1144 8.524 87.9824 8.884 87.7544 9.184C87.5264 9.48 87.2244 9.706 86.8484 9.862C86.4764 10.014 86.0504 10.09 85.5704 10.09ZM84.5504 6.022H86.9384C86.9264 5.542 86.8104 5.172 86.5904 4.912C86.3704 4.648 86.0084 4.516 85.5044 4.516C84.9804 4.516 84.5904 4.692 84.3344 5.044C84.0784 5.392 83.9344 5.874 83.9024 6.49C83.9344 6.31 84.0024 6.188 84.1064 6.124C84.2104 6.056 84.3584 6.022 84.5504 6.022Z"
19
- fill="white"
20
- />
21
- </svg>
22
- </a>
23
- </div>`;
24
-
25
- export type LoadingType = 'auto' | 'lazy' | 'eager';
26
-
27
- /**
28
- * Spline scene viewer
29
- */
30
- @customElement('spline-viewer')
31
- export class SplineViewer extends LitElement {
32
- static styles = css`
33
- :host {
34
- display: block;
35
- }
36
- #container {
37
- width: 100%;
38
- height: 100%;
39
- position: relative;
40
- }
41
- #spline {
42
- display: block;
43
- }
44
-
45
- #logo {
46
- display: none;
47
- position: absolute;
48
- z-index: 2;
49
- bottom: 20px;
50
- right: 20px;
51
- width: 137px;
52
- height: 36px;
53
- flex-direction: row;
54
- align-items: center;
55
- justify-content: center;
56
- gap: 6px;
57
- border-radius: 12px;
58
- background: linear-gradient(180deg, #16181c 0%, #121316 100%);
59
- box-shadow: inset 0px -2px 0px -1px #060709,
60
- inset 0px 1px 0px rgba(255, 255, 255, 0.04);
61
- }
62
- #logo span {
63
- display: block;
64
- width: 20px;
65
- height: 20px;
66
- background-image: url(https://app.spline.design/_assets/_icons/icon_favicon32x32.png);
67
- background-size: cover;
68
- }
69
- #logo svg {
70
- display: block;
71
- margin-right: 2px;
72
- }
73
- #logo:hover {
74
- background: linear-gradient(180deg, #1b1c21 0%, #17181c 100%);
75
- }
76
- `;
77
-
78
- /**
79
- * The url of the .splinecode file as exported from Spline Editor.
80
- */
81
- @property({ type: String }) url: string | null = null;
82
-
83
- /**
84
- * The width of the canvas
85
- */
86
- @property({ type: Number }) width: number | undefined = undefined;
87
-
88
- /**
89
- * The height of the canvas
90
- */
91
- @property({ type: Number }) height: number | undefined = undefined;
92
-
93
- /**
94
- * Background color
95
- */
96
- @property({ type: String }) background: string | undefined = undefined;
97
-
98
- /**
99
- * Background color
100
- */
101
- @property({ type: String }) loading: LoadingType = 'auto';
102
-
103
- protected _spline: Application;
104
-
105
- protected _intersectionObserver: IntersectionObserver | null = null;
106
- protected _isElementInViewport = false;
107
- protected _loaded = false;
108
-
109
- protected _container: HTMLElement;
110
- protected _canvas: HTMLCanvasElement;
111
- protected _logo: HTMLElement;
112
-
113
- private _loadedUrl: string | null = null;
114
-
115
- constructor() {
116
- super();
117
-
118
- this.attachShadow({ mode: 'open' });
119
- const shadowRoot = this.shadowRoot!;
120
- render(template, shadowRoot);
121
-
122
- this._container = shadowRoot.querySelector('#container') as HTMLElement;
123
- this._canvas = shadowRoot.querySelector('#spline') as HTMLCanvasElement;
124
- this._logo = shadowRoot.querySelector('#logo') as HTMLElement;
125
-
126
- this._spline = new Application(this._canvas);
127
-
128
- if (HAS_INTERSECTION_OBSERVER) {
129
- this._intersectionObserver = new IntersectionObserver(
130
- (entries) => {
131
- for (let entry of entries) {
132
- if (entry.target === this) {
133
- this._isElementInViewport = entry.isIntersecting;
134
- if (this._isElementInViewport && !this._loaded) {
135
- this.load();
136
- }
137
- }
138
- }
139
- },
140
- {
141
- root: null,
142
- rootMargin: '0px',
143
- threshold: 0.00001,
144
- }
145
- );
146
- } else {
147
- this._isElementInViewport = true;
148
- }
149
- }
150
-
151
- protected load() {
152
- if (
153
- this._loaded ||
154
- (!this._isElementInViewport && this.loading !== 'eager') ||
155
- !this.url ||
156
- this.url === this._loadedUrl
157
- )
158
- return;
159
-
160
- this._loadedUrl = this.url;
161
- this._spline.load(this.url).then(() => {
162
- this._loaded = true;
163
- if (this.background !== undefined)
164
- this._spline?.setBackgroundColor(this.background);
165
- if (
166
- this._spline?.data.scene.publish.settings.web.logo !== false &&
167
- this._logo
168
- ) {
169
- this._logo.style.display = 'flex';
170
- }
171
- });
172
- }
173
-
174
- updated(changedProperties: Map<string | number | symbol, any>) {
175
- super.updated(changedProperties);
176
-
177
- if (changedProperties.has('url')) {
178
- if (this.url == null) {
179
- this._loaded = false;
180
- } else if (this.url !== this._loadedUrl) {
181
- this._loaded = false;
182
- this.load();
183
- }
184
- }
185
-
186
- if (changedProperties.has('width') && this.width !== undefined) {
187
- this._container.style.width = this.width + 'px';
188
- }
189
- if (changedProperties.has('height') && this.height !== undefined) {
190
- this._container.style.height = this.height + 'px';
191
- }
192
- }
193
-
194
- connectedCallback() {
195
- super.connectedCallback();
196
- window.addEventListener('resize', this._handleResize);
197
- if (HAS_INTERSECTION_OBSERVER) {
198
- this._intersectionObserver!.observe(this);
199
- }
200
- }
201
-
202
- disconnectedCallback() {
203
- window.removeEventListener('resize', this._handleResize);
204
- if (HAS_INTERSECTION_OBSERVER) {
205
- this._intersectionObserver!.unobserve(this);
206
- }
207
-
208
- super.disconnectedCallback();
209
- }
210
-
211
- private _handleResize = () => {
212
- // Needed for event domRect in case this element changes position in page
213
- this._spline?.eventManager?.resize();
214
- };
215
- }
216
-
217
- declare global {
218
- interface HTMLElementTagNameMap {
219
- 'spline-viewer': SplineViewer;
220
- }
221
- }
package/src/test/spline-viewer_test.ts DELETED
@@ -1,43 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2021 Google LLC
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */
6
-
7
- import { SplineViewer } from '../spline-viewer';
8
-
9
- import { fixture, assert } from '@open-wc/testing';
10
- import { html } from 'lit/static-html.js';
11
-
12
- suite('spline-viewer', () => {
13
- test('is defined', () => {
14
- const el = document.createElement('spline-viewer');
15
- assert.instanceOf(el, SplineViewer);
16
- });
17
-
18
- test('renders with default values', async () => {
19
- const el = await fixture(html`<spline-viewer></spline-viewer>`);
20
- assert.shadowDom.equal(
21
- el,
22
- `<div id="container">
23
- <canvas id="spline"></canvas>
24
- <a href="https://spline.design" id="logo"><span></span></a>
25
- </div>`
26
- );
27
- });
28
-
29
- test('renders with a set url', async () => {
30
- const el = await fixture(
31
- html`<spline-viewer
32
- url="https://prod.spline.design/l9fSWM7D23TRr8U4/scene.splinecode"
33
- ></spline-viewer>`
34
- );
35
- assert.shadowDom.equal(
36
- el,
37
- `<div id="container">
38
- <canvas id="spline"></canvas>
39
- <a href="https://spline.design" id="logo"><span></span></a>
40
- </div>`
41
- );
42
- });
43
- });