(".item").getNowFrame(0.5, EASE_IN);
44 | const playState2 = scene.getPlayState();
45 | // Then
46 | expect(playState).to.be.equals("running");
47 | expect(playState2).to.be.equals("paused");
48 | expect(scene.getEasingName()).to.be.equals("cubic-bezier(0.42,0,1,1)");
49 | expect(frame.get("a")).to.be.not.equals(0.5);
50 | });
51 | it("test animateItem method", () => {
52 | // Given, When
53 | const item = animateItem({
54 | 0: {
55 | a: 0,
56 | },
57 | 1: {
58 | a: 1,
59 | },
60 | });
61 | const playState = item.getPlayState();
62 |
63 | item.pause();
64 | const frame = item.getNowFrame(0.5);
65 | const playState2 = item.getPlayState();
66 | // Then
67 | expect(playState).to.be.equals("running");
68 | expect(playState2).to.be.equals("paused");
69 | expect(frame.get("a")).to.be.equals(0.5);
70 | });
71 | it("test animateItem method with easing", () => {
72 | // Given, When
73 | const item = animateItem({
74 | 0: {
75 | a: 0,
76 | },
77 | 1: {
78 | a: 1,
79 | },
80 | }, {
81 | easing: "ease-in",
82 | });
83 | const playState = item.getPlayState();
84 |
85 | item.pause();
86 | const frame = item.getNowFrame(0.5);
87 | const playState2 = item.getPlayState();
88 | // Then
89 | expect(playState).to.be.equals("running");
90 | expect(playState2).to.be.equals("paused");
91 | expect(frame.get("a")).to.be.not.equals(0.5);
92 | });
93 | });
94 |
--------------------------------------------------------------------------------
/packages/scenejs/test/unit/utils.spec.ts:
--------------------------------------------------------------------------------
1 | import { splitUnit } from "@daybrush/utils";
2 | import Frame from "../../src/Frame";
3 | import { flatSceneObject, isFrame } from "../../src/utils";
4 |
5 | describe("utils Test", () => {
6 | it("should check 'splitUnit' method", () => {
7 | expect(splitUnit("1234")).to.be.deep.equals({ prefix: "", value: 1234, unit: "" });
8 | expect(splitUnit("d1234")).to.be.deep.equals({ prefix: "d", value: 1234, unit: "" });
9 | expect(splitUnit("d1234d")).to.be.deep.equals({ prefix: "d", value: 1234, unit: "d" });
10 | expect(splitUnit("ddddd")).to.be.deep.equals({ prefix: "", value: NaN, unit: "" });
11 | });
12 | it("test flatSceneObject", () => {
13 | // Given
14 | const frames = {
15 | a: new Frame(),
16 | b: new Frame(),
17 | c: {
18 | c1: new Frame(),
19 | c2: {
20 | c21: new Frame(),
21 | c22: new Frame(),
22 | },
23 | },
24 | };
25 |
26 | // When
27 | const obj = flatSceneObject(frames, "/");
28 | const objKeys = Object.keys(obj);
29 |
30 | // Then
31 | expect(objKeys).to.be.deep.equals(["a", "b", "c/c1", "c/c2/c21", "c/c2/c22"]);
32 | objKeys.forEach(key => {
33 | expect(isFrame(obj[key])).to.be.true;
34 | });
35 | });
36 | });
37 |
--------------------------------------------------------------------------------
/packages/scenejs/test/unit/utils/color.spec.ts:
--------------------------------------------------------------------------------
1 | import { toFullHex, cutHex, hexToRGBA, hslToRGBA } from "@daybrush/utils";
2 | import { rgbaToHexa } from "../../../src/utils";
3 |
4 | describe("color Test", () => {
5 | describe("test color ", () => {
6 | it("should check 'cutHex'", () => {
7 | const hex1 = cutHex("#abc");
8 | const hex2 = cutHex("#aabbcc");
9 | const hex3 = cutHex("#aabbccdd");
10 | const hex4 = cutHex("abcdef");
11 |
12 | // Then
13 | expect(hex1).to.be.equals("abc");
14 | expect(hex2).to.be.equals("aabbcc");
15 | expect(hex3).to.be.equals("aabbccdd");
16 | expect(hex4).to.be.equals("abcdef");
17 | });
18 | it("should check 'toFullHex'", () => {
19 | const hex = toFullHex("#abc");
20 |
21 | // Then
22 | expect(hex).to.be.equals("#aabbcc");
23 | });
24 | it("should check 'hexToRGBA'", () => {
25 | const rgb1 = hexToRGBA("#000000");
26 | const rgb2 = hexToRGBA("#ffffff");
27 | const rgb3 = hexToRGBA("#00000000");
28 | const rgb4 = hexToRGBA("#00000005");
29 |
30 | expect(rgb1).to.be.deep.equals([0, 0, 0, 1]);
31 | expect(rgb2).to.be.deep.equals([255, 255, 255, 1]);
32 | expect(rgb3).to.be.deep.equals([0, 0, 0, 0]);
33 | expect(rgb4).to.be.deep.equals([0, 0, 0, 5 / 255]);
34 | });
35 | it("should check 'hslToRGBA'", () => {
36 | // Given, When
37 | const rgb1 = hslToRGBA([0, 0.4, 0.5]);
38 | const rgb2 = hslToRGBA([80, 0.4, 0.5]);
39 | const rgb3 = hslToRGBA([150, 0.4, 0.5]);
40 | const rgb4 = hslToRGBA([215, 0.4, 0.5]);
41 | const rgb5 = hslToRGBA([260, 0.4, 0.5]);
42 | const rgb6 = hslToRGBA([320, 0.4, 0.5]);
43 | const rgb7 = hslToRGBA([320, 0.4, 0.5, 0.4]);
44 | const rgb8 = hslToRGBA([-40, 0.4, 0.5]);
45 |
46 | // Then
47 | expect(rgb1).to.be.deep.equals([179, 77, 77, 1]);
48 | expect(rgb2).to.be.deep.equals([145, 179, 77, 1]);
49 | expect(rgb3).to.be.deep.equals([77, 179, 128, 1]);
50 | expect(rgb4).to.be.deep.equals([77, 119, 179, 1]);
51 | expect(rgb5).to.be.deep.equals([110, 77, 179, 1]);
52 | expect(rgb6).to.be.deep.equals([179, 77, 145, 1]);
53 | expect(rgb7).to.be.deep.equals([179, 77, 145, 0.4]);
54 | expect(rgb8).to.be.deep.equals([179, 77, 145, 1]);
55 | });
56 | it("should check 'rgbaToHexa'", () => {
57 | // Given, When
58 | const rgba1 = rgbaToHexa(`rgba(179, 77, 77, 1)`);
59 | const rgba2 = rgbaToHexa(`rgba(145, 179, 77, 1)`);
60 | const rgba3 = rgbaToHexa(`rgba(77, 179, 128, 1)`);
61 | const rgba4 = rgbaToHexa(`rgba(77, 119, 179, 1)`);
62 | const rgba5 = rgbaToHexa(`rgba(110, 77, 179, 1)`);
63 | const rgba6 = rgbaToHexa(`rgba(179, 77, 145, 1)`);
64 | const rgba7 = rgbaToHexa(`rgba(179, 77, 145, 0.4)`);
65 | const rgba8 = rgbaToHexa(`rgba(179, 77, 145, 1)`);
66 | const rgba9 = rgbaToHexa(`transparent`);
67 |
68 | // Then
69 | expect(rgba1).to.be.equals("#b34d4dff");
70 | expect(rgba2).to.be.equals("#91b34dff");
71 | expect(rgba3).to.be.equals("#4db380ff");
72 | expect(rgba4).to.be.equals("#4d77b3ff");
73 | expect(rgba5).to.be.equals("#6e4db3ff");
74 | expect(rgba6).to.be.equals("#b34d91ff");
75 | expect(rgba7).to.be.equals("#b34d9166");
76 | expect(rgba8).to.be.equals("#b34d91ff");
77 | expect(rgba9).to.be.equals("");
78 | });
79 | });
80 | });
81 |
--------------------------------------------------------------------------------
/packages/scenejs/test/unit/utils/dot.spec.ts:
--------------------------------------------------------------------------------
1 | import { dot } from "../../../src/utils/dot";
2 | import PropertyObject from "../../../src/PropertyObject";
3 | import { stringToColorObject } from "../../../src/utils/property";
4 | /* eslint-disable */
5 |
6 | describe("utils/dot Test", () => {
7 | describe("test 'dot' methods", () => {
8 | it("should check 'dot' instead of 'dotArray' method", () => {
9 | expect(dot([1, 2, 3], 2, 1, 1)).to.be.deep.equal([1, 2, 3]);
10 | expect(dot([1, 2, 3], "a", 1, 2)).to.be.deep.equal([1, 2, 3]);
11 | expect(dot([1, 2, 3], [2, 3, 4], 1, 1)).to.be.deep.equal([1.5, 2.5, 3.5]);
12 | expect(dot([1, 2, 3, 4], [2, 3, 4], 0, 1)).to.be.deep.equal([1, 2, 3, 4]);
13 | expect(dot([1, 2, 3, 4], [2, 3, 4], 1, 0)).to.be.deep.equal([2, 3, 4]);
14 | expect(dot([1, 2, 3, 4], [2, 3, 4], 1, 1)).to.be.deep.equal([1.5, 2.5, 3.5, 4]);
15 | });
16 | it("should check 'dot' instead of 'dotColor' method(rgb vs rgb)", () => {
17 | const color1 = stringToColorObject("rgb(0, 0, 0)");
18 | const color2 = stringToColorObject("rgb(100, 200, 220)");
19 | const color3 = stringToColorObject("rgba(0, 0, 0, 0.5)");
20 | const color4 = stringToColorObject("rgba(100, 200, 220, 0.2)");
21 | const color5 = new PropertyObject([0, 0, 0], {
22 | model: "rgba",
23 | prefix: "rgba(",
24 | suffix: ")",
25 | });
26 | const color6 = new PropertyObject([50, 40, 20, 1], {
27 | model: "rgba",
28 | prefix: "rgba(",
29 | suffix: ")",
30 | });
31 | expect(dot(color1, color2, 1, 1).toValue()).to.be.equal("rgba(50,100,110,1)");
32 | expect(dot(color1, color3, 1, 1).toValue()).to.be.equal("rgba(0,0,0,0.75)");
33 | expect(dot(color2, color3, 1, 1).toValue()).to.be.equal("rgba(50,100,110,0.75)");
34 | expect(dot(color3, color4, 1, 1).toValue()).to.be.equal("rgba(50,100,110,0.35)");
35 | expect(dot(color3, color5, 1, 1).toValue()).to.be.equal("rgba(0,0,0,0.75)");
36 | expect(dot(color4, color5, 1, 1).toValue()).to.be.equal("rgba(50,100,110,0.6)");
37 | expect(dot(color4, color5, 1, 1).toValue()).to.be.equal("rgba(50,100,110,0.6)");
38 | expect(dot(color5, color6, 1, 1).toValue()).to.be.equal("rgba(25,20,10,1)");
39 | expect(dot(color4, color6, 1, 1).toValue()).to.be.equal("rgba(75,120,120,0.6)");
40 | });
41 | it(`should check 'dot' instead of 'dotObject' method`, () => {
42 | const color5 = new PropertyObject([0, 0, 0], {
43 | type: "color",
44 | model: "rgba",
45 | prefix: "rgba(",
46 | suffix: ")",
47 | });
48 | const color6 = new PropertyObject([50, 40, 20, 1], {
49 | type: "color",
50 | model: "rgba",
51 | prefix: "rgba(",
52 | suffix: ")",
53 | });
54 | const object = new PropertyObject([10, 10, 10]);
55 | const object2 = new PropertyObject([4, 3, 5, 1]);
56 |
57 | expect(dot(color5, color6, 1, 1).toValue()).to.be.equal("rgba(25,20,10,1)");
58 | expect(dot(object, color6, 1, 1).toValue()).to.be.equal("rgba(30,25,15)");
59 | expect(dot(object, object2, 1, 1).toValue()).to.be.equal("7,6.5,7.5");
60 | });
61 | });
62 | });
63 |
--------------------------------------------------------------------------------
/packages/scenejs/tsconfig.declaration.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig",
3 | "compilerOptions": {
4 | "removeComments": false,
5 | "declaration": true,
6 | "emitDeclarationOnly": true,
7 | "declarationDir": "declaration"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/scenejs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "./outjs/",
4 | "esModuleInterop": false,
5 | "sourceMap": true,
6 | "module": "es2015",
7 | "target": "es5",
8 | "experimentalDecorators": true,
9 | "importHelpers": true,
10 | "skipLibCheck": true,
11 | "moduleResolution": "node",
12 | "lib": [
13 | "es2015",
14 | "dom"
15 | ],
16 | },
17 | "include": [
18 | "./src/**/*.ts"
19 | ]
20 | }
--------------------------------------------------------------------------------
/packages/scenejs/tsconfig.test.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig",
3 | "compilerOptions": {
4 | "module": "commonjs",
5 | "noImplicitAny": false,
6 | "strictNullChecks": false,
7 | "types": [
8 | "karma-chai",
9 | "mocha",
10 | ]
11 | },
12 | "include": [
13 | "./src/**/*.ts",
14 | "./test/unit/**/*.ts"
15 | ],
16 | "exclude": [
17 | "./node_modules/**/*.ts"
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/packages/scenejs/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "defaultSeverity": "error",
3 | "extends": [
4 | "tslint:recommended"
5 | ],
6 | "rules": {
7 | "jsdoc-format": false,
8 | "forin": false,
9 | "no-console": false,
10 | "no-any": false,
11 | "interface-name": false,
12 | "indent": [
13 | true,
14 | "spaces",
15 | 4
16 | ],
17 | "ordered-imports": false,
18 | "object-literal-sort-keys": false,
19 | "no-unused-expression": false,
20 | "arrow-parens": [
21 | true,
22 | "ban-single-arg-parens"
23 | ],
24 | "max-line-length": [
25 | true,
26 | {
27 | "limit": 120,
28 | "ignore-pattern": "(\\* @)|//"
29 | }
30 | ],
31 | "trailing-comma": [
32 | true,
33 | {
34 | "multiline": {
35 | "objects": "always",
36 | "arrays": "always",
37 | "functions": "always",
38 | "typeLiterals": "ignore"
39 | },
40 | "esSpecCompliant": true
41 | }
42 | ]
43 | }
44 | }
--------------------------------------------------------------------------------
/packages/svelte-scenejs/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /public/build/
3 |
4 | .DS_Store
5 | .svelte-kit/generated
6 | .svelte-kit/types
7 | .svelte-kit/ambient.d.ts
--------------------------------------------------------------------------------
/packages/svelte-scenejs/.svelte-kit/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": "..",
4 | "paths": {},
5 | "rootDirs": [
6 | "..",
7 | "./types"
8 | ],
9 | "importsNotUsedAsValues": "error",
10 | "isolatedModules": true,
11 | "preserveValueImports": true,
12 | "lib": [
13 | "esnext",
14 | "DOM",
15 | "DOM.Iterable"
16 | ],
17 | "moduleResolution": "node",
18 | "module": "esnext",
19 | "target": "esnext"
20 | },
21 | "include": [
22 | "ambient.d.ts",
23 | "./types/**/$types.d.ts",
24 | "../vite.config.ts",
25 | "../src/**/*.js",
26 | "../src/**/*.ts",
27 | "../src/**/*.svelte",
28 | "../src/**/*.js",
29 | "../src/**/*.ts",
30 | "../src/**/*.svelte",
31 | "../tests/**/*.js",
32 | "../tests/**/*.ts",
33 | "../tests/**/*.svelte"
34 | ],
35 | "exclude": [
36 | "../node_modules/**",
37 | "./[!ambient.d.ts]**"
38 | ]
39 | }
--------------------------------------------------------------------------------
/packages/svelte-scenejs/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 |
3 | All notable changes to this project will be documented in this file.
4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5 |
6 | ## [1.0.0-beta.12](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/compare/svelte-scenejs@1.0.0-beta.9...svelte-scenejs@1.0.0-beta.12) (2023-06-05)
7 |
8 |
9 | ### :mega: Other
10 |
11 | * publish packages ([97ba4e7](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/97ba4e775018179c16b0e5c0035f5a3773b64722))
12 | * publish packages ([f76d778](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/f76d7782ee508fc12f16d250ca0c925f81d2a0e1))
13 | * publish packages ([2f9e242](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/2f9e242c926cb13672d7f6d9924ea7782fb69815))
14 |
15 |
16 |
17 | ## [1.0.0-beta.9](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/compare/svelte-scenejs@1.0.0-beta.4...svelte-scenejs@1.0.0-beta.9) (2023-05-21)
18 |
19 |
20 | ### :rocket: New Features
21 |
22 | * add modules for frameworks ([d1c173d](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/d1c173d72efba70193fbbcf50d8e9e3edb2629ae))
23 |
24 |
25 | ### :bug: Bug Fix
26 |
27 | * fix frameworks' reactive props ([17f9538](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/17f9538823dafad9e36673fe7cc5bfa9178a147e))
28 | * fix partial reactive props ([06f063a](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/06f063acd979e265bee1e09b1971211b65a6aaec))
29 |
30 |
31 | ### :mega: Other
32 |
33 | * publish packages ([b328ba8](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/b328ba8fbbf552d1d8048c280392be59f12da68b))
34 | * publish packages ([275e338](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/275e338931d19f3a75faf4c7f0935eeb848f5a9e))
35 | * publish packages ([eb28736](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/eb2873676adb0fedf18d1e5a52bfdce08552274a))
36 | * publish packages ([0e37841](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/0e37841738e150d6deb13f501bb715421ab040aa))
37 | * publish packages ([002fc93](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/002fc93c9536659b5db95527c019f1e3ad32a1f8))
38 |
39 |
40 |
41 | ## [1.0.0-beta.4](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/compare/svelte-scenejs@1.0.0-beta.3...svelte-scenejs@1.0.0-beta.4) (2022-12-26)
42 |
43 |
44 | ### :mega: Other
45 |
46 | * publish packages ([843ebf6](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/843ebf6d483549c130db47499d69dd4825118798))
47 |
48 |
49 |
50 | ## [1.0.0-beta.3](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/compare/svelte-scenejs@1.0.0-beta.1...svelte-scenejs@1.0.0-beta.3) (2022-12-21)
51 |
52 |
53 | ### :bug: Bug Fix
54 |
55 | * fix docs ([67546f5](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/67546f5e6e06b5f9f4c626657f42038802f4b2b6))
56 | * update modules ([30191b8](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/30191b8e7c195de355d0c01fa9110d6fe0b3df3b))
57 |
58 |
59 | ### :mega: Other
60 |
61 | * publish packages ([1f4a4f3](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/1f4a4f3719f1789fb91c7e744f4bf8261751944f))
62 | * publish packages ([3b63fde](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/3b63fde8232cdc6454a8d8fe1a42b6317d614036))
63 |
64 |
65 |
66 | ## 1.0.0-beta.1 (2022-12-15)
67 |
68 |
69 | ### :rocket: New Features
70 |
71 | * add svelte-scenejs #80 ([5198c5c](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/5198c5c72eaebe5f1b1bd636eb78a19fb688c0f9))
72 |
73 |
74 | ### :bug: Bug Fix
75 |
76 | * remove useless file ([c28c2da](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/c28c2da241f1a05a0bd098d3f1cd9183c964a930))
77 |
78 |
79 | ### :memo: Documentation
80 |
81 | * fix README ([f818dd9](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/f818dd929b687d91b36005b861934538a16e7286))
82 |
83 |
84 | ### :mega: Other
85 |
86 | * publish packages ([60dbab3](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/60dbab3c8ba568b818a0fc1cd941d9dfe64c7be3))
87 | * publish packages ([de47f51](https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/commit/de47f5187843c7ec208fea797f67d413f530ab8e))
88 |
--------------------------------------------------------------------------------
/packages/svelte-scenejs/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | Svelte Scene.js
4 |
5 |
6 |
10 |
11 |
12 | 🎬 A Svelte Component that create JavaScript & CSS timeline-based animation with Scene.js.
13 |
14 | About Scene.js API Features
15 |
101 |
103 |
104 |
105 | ## Sponsors
106 |
107 |
108 |
110 |
111 |
112 |
113 | ## 🐞 Bug Report
114 |
115 | If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/scenejs/issues) on GitHub.
116 |
117 |
118 |
119 | ## 📝 License
120 |
121 | This project is [MIT](https://github.com/daybrush/scenejs/blob/master/LICENSE) licensed.
122 |
123 |
124 | ## License
125 |
126 | ```
127 |
128 | MIT License
129 |
130 | Copyright (c) 2016 Daybrush
131 |
132 | Permission is hereby granted, free of charge, to any person obtaining a copy
133 | of this software and associated documentation files (the "Software"), to deal
134 | in the Software without restriction, including without limitation the rights
135 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
136 | copies of the Software, and to permit persons to whom the Software is
137 | furnished to do so, subject to the following conditions:
138 |
139 | The above copyright notice and this permission notice shall be included in all
140 | copies or substantial portions of the Software.
141 |
142 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
143 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
144 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
145 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
146 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
147 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
148 | SOFTWARE.
149 | ```
--------------------------------------------------------------------------------
/packages/svelte-scenejs/global.d.ts:
--------------------------------------------------------------------------------
1 | declare module "!!raw-loader!*" {
2 | const content: string;
3 | export default content;
4 | }
5 | declare module "*.svelte" {
6 | const content: any;
7 | export default content;
8 | }
9 |
--------------------------------------------------------------------------------
/packages/svelte-scenejs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "svelte-scenejs",
3 | "version": "1.0.0-beta.12",
4 | "type": "module",
5 | "lernaHelperReleaseType": "prerelease",
6 | "lernaHelperPublishTag": "latest",
7 | "description": "A React Component that create JavaScript & CSS timeline-based animation with Scene.js.",
8 | "svelte": "./dist/scene.esm.js",
9 | "main": "./dist/scene.cjs.js",
10 | "module": "./dist/scene.esm.js",
11 | "sideEffects": false,
12 | "types": "declaration/index.d.ts",
13 | "keywords": [
14 | "svelte",
15 | "reactive",
16 | "use",
17 | "scene",
18 | "scene.js",
19 | "scenejs",
20 | "keyframes",
21 | "timeline",
22 | "animate",
23 | "animation",
24 | "css",
25 | "requestAnimationFrame",
26 | "motion"
27 | ],
28 | "license": "MIT",
29 | "repository": {
30 | "type": "git",
31 | "url": "https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs"
32 | },
33 | "author": "Daybrush",
34 | "bugs": {
35 | "url": "https://github.com/daybrush/scenejs/issues"
36 | },
37 | "homepage": "https://github.com/daybrush/scenejs",
38 | "files": [
39 | "./*",
40 | "dist/*"
41 | ],
42 | "scripts": {
43 | "dev": "vite dev",
44 | "start": "sirv public --no-clear",
45 | "build": "rollup -c && npm run declaration",
46 | "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json"
47 | },
48 | "dependencies": {
49 | "@cfcs/svelte": "^0.1.0",
50 | "scenejs": "~1.10.3"
51 | },
52 | "devDependencies": {
53 | "@daybrush/builder": "^0.2.0",
54 | "@sveltejs/adapter-auto": "^1.0.0",
55 | "@sveltejs/kit": "^1.0.0",
56 | "svelte": "^3.54.0",
57 | "svelte-check": "^2.9.2",
58 | "tslib": "^2.4.1",
59 | "typescript": "^4.5.0 <4.6.0",
60 | "vite": "^4.0.0"
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/packages/svelte-scenejs/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/daybrush/scenejs/da1b4eb7c045d3f7133d2bb63fe29d1080be9639/packages/svelte-scenejs/public/favicon.png
--------------------------------------------------------------------------------
/packages/svelte-scenejs/public/global.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | position: relative;
3 | width: 100%;
4 | height: 100%;
5 | }
6 |
7 | body {
8 | color: #333;
9 | margin: 0;
10 | padding: 8px;
11 | box-sizing: border-box;
12 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
13 | }
14 |
15 | a {
16 | color: rgb(0,100,200);
17 | text-decoration: none;
18 | }
19 |
20 | a:hover {
21 | text-decoration: underline;
22 | }
23 |
24 | a:visited {
25 | color: rgb(0,80,160);
26 | }
27 |
28 | label {
29 | display: block;
30 | }
31 |
32 | input, button, select, textarea {
33 | font-family: inherit;
34 | font-size: inherit;
35 | -webkit-padding: 0.4em 0;
36 | padding: 0.4em;
37 | margin: 0 0 0.5em 0;
38 | box-sizing: border-box;
39 | border: 1px solid #ccc;
40 | border-radius: 2px;
41 | }
42 |
43 | input:disabled {
44 | color: #ccc;
45 | }
46 |
47 | button {
48 | color: #333;
49 | background-color: #f4f4f4;
50 | outline: none;
51 | }
52 |
53 | button:disabled {
54 | color: #999;
55 | }
56 |
57 | button:not(:disabled):active {
58 | background-color: #ddd;
59 | }
60 |
61 | button:focus {
62 | border-color: #666;
63 | }
64 |
--------------------------------------------------------------------------------
/packages/svelte-scenejs/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Svelte app
8 |
9 | %sveltekit.body%
11 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/svelte-scenejs/src/routes/+page.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
101 |
102 |
103 |
{ }
14 |
15 | /**
16 | * @memberof SvelteScene
17 | * @param {Reactive.FrameReactiveData} - Can be used as frame, cssText, cssObject, etc.
18 | * @return - You can use Frame methods and cssText, cssObject, ...etc
19 | * @example
20 | * import { useFrame } from "svelte-scenejs";
21 | *
22 | * const { cssText } = useFrame("text-align: center; transform: translate(10px, 10px);");
23 | *
24 | * $cssText;
25 | */
26 | export function useFrame(props: FrameReactiveData): SvelteFrameResult {
27 | return useReactive({
28 | ...FRAME_REACTIVE,
29 | data: () => props,
30 | });
31 | }
32 |
--------------------------------------------------------------------------------
/packages/svelte-scenejs/src/svelte-scenejs/useNowFrame.ts:
--------------------------------------------------------------------------------
1 | import { SvelteReactiveAdapterResult, useReactive } from "@cfcs/svelte";
2 | import { SceneItem, NOW_FRAME_REACTIVE } from "scenejs";
3 |
4 |
5 | /**
6 | * To access the state in Svelte you need to add $ prefix.
7 | * @typedef
8 | * @memberof SvelteScene
9 | * @extends SvelteScene.ReactFrameResult
10 | */
11 | export interface SvelteNowFrameResult extends SvelteReactiveAdapterResult { }
12 |
13 | /**
14 | * @memberof SvelteScene
15 | * @param - item to get the current frame
16 | * @return - You can use Frame methods and cssText, cssObject, ...etc State
17 | * @example
18 | * import { useSceneItem, useNowFrame } from "svelte-scenejs";
19 | *
20 | * const sceneItem = useSceneItem(...);
21 | * const { cssText } = useNowFrame(sceneItem);
22 | *
23 | * $cssText;
24 | */
25 | export function useNowFrame(item: SceneItem): SvelteNowFrameResult {
26 | return useReactive({
27 | ...NOW_FRAME_REACTIVE,
28 | data: () => item,
29 | });
30 | }
31 |
--------------------------------------------------------------------------------
/packages/svelte-scenejs/src/svelte-scenejs/useScene.ts:
--------------------------------------------------------------------------------
1 | import { SvelteReactiveAdapterResult, useReactive } from "@cfcs/svelte";
2 | import { SceneOptions, SceneReactiveProps, SCENE_REACTIVE } from "scenejs";
3 |
4 |
5 | /**
6 | * To access the state in Svelte you need to add $ prefix.
7 | * @typedef
8 | * @memberof SvelteScene
9 | * @extends Reactive.AnimatorReactiveState
10 | */
11 | export interface SvelteSceneResult extends SvelteReactiveAdapterResult { }
12 |
13 |
14 | /**
15 | * @memberof SvelteScene
16 | * @param {Reactive.SceneReactiveProps} - Items and properties that make up the scene
17 | * @param - Scene and Animator options
18 | * @return - You can use Scene methods and Animator State
19 | * @example
20 | * import { useScene, useNowFrame } from "svelte-scenejs";
21 | *
22 | * const scene = useScene({ ... });
23 | * const { cssText } = useNowFrame(scene.getItem("a1"));
24 | *
25 | * $cssText
26 | */
27 | export function useScene(props?: SceneReactiveProps, options?: Partial): SvelteSceneResult {
28 | return useReactive({
29 | ...SCENE_REACTIVE,
30 | data() {
31 | return {
32 | props,
33 | options,
34 | };
35 | },
36 | });
37 | }
38 |
--------------------------------------------------------------------------------
/packages/svelte-scenejs/src/svelte-scenejs/useSceneItem.ts:
--------------------------------------------------------------------------------
1 | import { SvelteReactiveAdapterResult, useReactive } from "@cfcs/svelte";
2 | import { SCENE_ITEM_REACTIVE, SceneItemOptions, SceneItemReactiveProps } from "scenejs";
3 |
4 | /**
5 | * To access the state in Svelte you need to add $ prefix.
6 | * @typedef
7 | * @memberof SvelteScene
8 | * @extends Reactive.AnimatorReactiveState
9 | */
10 | export interface SvelteSceneItemResult extends SvelteReactiveAdapterResult { }
11 |
12 | /**
13 | * @memberof SvelteScene
14 | * @param {Reactive.SceneItemReactiveProps} - Items and properties that make up the scene item
15 | * @param - SceneItem and Animator options
16 | * @return - You can use SceneItem methods and Animator State.
17 | * @example
18 | * import { useSceneItem, useNowFrame } from "svelte-scenejs";
19 | *
20 | * const item = useSceneItem({ ... });
21 | * const { cssText } = useNowFrame(item);
22 | *
23 | * $cssText
24 | */
25 | export function useSceneItem(props?: SceneItemReactiveProps, options?: Partial) {
26 | return useReactive({
27 | ...SCENE_ITEM_REACTIVE,
28 | data: () => ({
29 | props,
30 | options,
31 | }),
32 | });
33 | }
34 |
--------------------------------------------------------------------------------
/packages/svelte-scenejs/svelte.config.js:
--------------------------------------------------------------------------------
1 | import adapter from '@sveltejs/adapter-auto';
2 | import { vitePreprocess } from '@sveltejs/kit/vite';
3 |
4 | /** @type {import('@sveltejs/kit').Config} */
5 | const config = {
6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors
7 | // for more information about preprocessors
8 | preprocess: vitePreprocess(),
9 |
10 | kit: {
11 | adapter: adapter()
12 | }
13 | };
14 |
15 | export default config;
16 |
--------------------------------------------------------------------------------
/packages/svelte-scenejs/tsconfig.declaration.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig",
3 | "compilerOptions": {
4 | "allowJs": false,
5 | "noEmit": false,
6 | "isolatedModules": false,
7 | "removeComments": false,
8 | "declaration": true,
9 | "emitDeclarationOnly": true,
10 | "declarationDir": "declaration"
11 | },
12 | "include": ["src/svelte-scenejs/**/*.ts"],
13 | "exclude": ["node_modules"],
14 | }
15 |
--------------------------------------------------------------------------------
/packages/svelte-scenejs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "./outjs/",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "experimentalDecorators": true
22 | },
23 | "include": [
24 | "./src/**/*.ts"
25 | ],
26 | "exclude": ["node_modules", "__sapper__/*", "public/*"]
27 | }
28 |
--------------------------------------------------------------------------------
/packages/svelte-scenejs/vite.config.js:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite';
2 |
3 | /** @type {import('vite').UserConfig} */
4 | const config = {
5 | plugins: [sveltekit()]
6 | };
7 |
8 | export default config;
9 |
--------------------------------------------------------------------------------
/packages/vue-scenejs/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 |
--------------------------------------------------------------------------------
/packages/vue-scenejs/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist
4 |
5 | # local env files
6 | .env.local
7 | .env.*.local
8 |
9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 |
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 |
--------------------------------------------------------------------------------
/packages/vue-scenejs/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 |
3 | All notable changes to this project will be documented in this file.
4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5 |
6 | ## [2.0.0-beta.11](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/compare/vue-scenejs@2.0.0-beta.8...vue-scenejs@2.0.0-beta.11) (2023-06-05)
7 |
8 |
9 | ### :mega: Other
10 |
11 | * publish packages ([97ba4e7](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/commit/97ba4e775018179c16b0e5c0035f5a3773b64722))
12 | * publish packages ([f76d778](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/commit/f76d7782ee508fc12f16d250ca0c925f81d2a0e1))
13 | * publish packages ([2f9e242](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/commit/2f9e242c926cb13672d7f6d9924ea7782fb69815))
14 |
15 |
16 |
17 | ## [2.0.0-beta.8](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/compare/vue-scenejs@2.0.0-beta.3...vue-scenejs@2.0.0-beta.8) (2023-05-21)
18 |
19 |
20 | ### :rocket: New Features
21 |
22 | * add modules for frameworks ([d1c173d](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/commit/d1c173d72efba70193fbbcf50d8e9e3edb2629ae))
23 |
24 |
25 | ### :bug: Bug Fix
26 |
27 | * fix frameworks' reactive props ([17f9538](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/commit/17f9538823dafad9e36673fe7cc5bfa9178a147e))
28 | * fix partial reactive props ([06f063a](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/commit/06f063acd979e265bee1e09b1971211b65a6aaec))
29 |
30 |
31 | ### :mega: Other
32 |
33 | * publish packages ([b328ba8](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/commit/b328ba8fbbf552d1d8048c280392be59f12da68b))
34 | * publish packages ([275e338](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/commit/275e338931d19f3a75faf4c7f0935eeb848f5a9e))
35 | * publish packages ([eb28736](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/commit/eb2873676adb0fedf18d1e5a52bfdce08552274a))
36 | * publish packages ([0e37841](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/commit/0e37841738e150d6deb13f501bb715421ab040aa))
37 | * publish packages ([002fc93](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/commit/002fc93c9536659b5db95527c019f1e3ad32a1f8))
38 |
39 |
40 |
41 | ## [2.0.0-beta.3](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/compare/vue-scenejs@2.0.0-beta.2...vue-scenejs@2.0.0-beta.3) (2022-12-26)
42 |
43 |
44 | ### :mega: Other
45 |
46 | * publish packages ([843ebf6](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/commit/843ebf6d483549c130db47499d69dd4825118798))
47 |
48 |
49 |
50 | ## 2.0.0-beta.2 (2022-12-21)
51 |
52 |
53 | ### :rocket: New Features
54 |
55 | * add vue-scenejs for scenejs 1.0.0 (#34) ([af2b8ea](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/commit/af2b8ea013c652470631f6dfe0b2b753cec6ad0a))
56 | * Support Vue 2 & Vue 3 frameworks ([a5a0665](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/commit/a5a066535781d7f690ffb904abf41f6256ebee62))
57 |
58 |
59 | ### :bug: Bug Fix
60 |
61 | * update modules ([30191b8](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/commit/30191b8e7c195de355d0c01fa9110d6fe0b3df3b))
62 |
63 |
64 | ### :mega: Other
65 |
66 | * apply lerna ([39520c3](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/commit/39520c38008399d7947684f7e443b9b1765e422b))
67 | * publish packages ([1f4a4f3](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/commit/1f4a4f3719f1789fb91c7e744f4bf8261751944f))
68 | * publish packages ([3b63fde](https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs/commit/3b63fde8232cdc6454a8d8fe1a42b6317d614036))
69 |
--------------------------------------------------------------------------------
/packages/vue-scenejs/demo/index.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import App from './App.vue';
3 |
4 | createApp(App).mount('#app')
5 |
--------------------------------------------------------------------------------
/packages/vue-scenejs/demo/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | declare module '*.vue' {
3 | import type { DefineComponent } from 'vue'
4 | const component: DefineComponent<{}, {}, any>
5 | export default component
6 | }
7 |
--------------------------------------------------------------------------------
/packages/vue-scenejs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-scenejs",
3 | "version": "2.0.0-beta.11",
4 | "lernaHelperReleaseType": "prerelease",
5 | "lernaHelperPublishTag": "latest",
6 | "description": "A Vue 3 Component that create JavaScript & CSS timeline-based animation with Scene.js.",
7 | "main": "./dist/scene.cjs.js",
8 | "module": "./dist/scene.esm.js",
9 | "sideEffects": false,
10 | "types": "declaration/index.d.ts",
11 | "keywords": [
12 | "vue",
13 | "vue3",
14 | "composition",
15 | "reactive",
16 | "composition",
17 | "use",
18 | "scene",
19 | "scene.js",
20 | "scenejs",
21 | "keyframes",
22 | "timeline",
23 | "animate",
24 | "animation",
25 | "css",
26 | "requestAnimationFrame",
27 | "motion"
28 | ],
29 | "scripts": {
30 | "serve": "vue-cli-service serve demo",
31 | "build": "rm -rf dist && rollup -c && npm run declaration",
32 | "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
33 | "lint": "vue-cli-service lint --no-fix"
34 | },
35 | "repository": {
36 | "type": "git",
37 | "url": "https://github.com/daybrush/scenejs/blob/master/packages/vue3-scenejs"
38 | },
39 | "author": "Daybrush",
40 | "bugs": {
41 | "url": "https://github.com/daybrush/scenejs/issues"
42 | },
43 | "homepage": "https://github.com/daybrush/scenejs",
44 | "files": [
45 | "./*",
46 | "dist/*"
47 | ],
48 | "dependencies": {
49 | "@cfcs/vue3": "^0.1.0",
50 | "scenejs": "~1.10.3"
51 | },
52 | "devDependencies": {
53 | "@daybrush/builder": "^0.2.0",
54 | "@vue/cli-plugin-typescript": "~4.5.0",
55 | "@vue/cli-service": "~4.5.0",
56 | "@vue/compiler-sfc": "^3.0.0",
57 | "rollup-plugin-vue": "^6.0.0",
58 | "tslib": "^2.3.1",
59 | "typescript": "^4.5.0",
60 | "vue": "^3.1.1"
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/packages/vue-scenejs/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | autoprefixer: {}
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/vue-scenejs/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/daybrush/scenejs/da1b4eb7c045d3f7133d2bb63fe29d1080be9639/packages/vue-scenejs/public/favicon.ico
--------------------------------------------------------------------------------
/packages/vue-scenejs/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | vue-moveable
9 |
10 |
11 |
12 | We're sorry but vue-moveable doesn't work properly without JavaScript enabled. Please enable it to continue.
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/packages/vue-scenejs/rollup.config.js:
--------------------------------------------------------------------------------
1 | const buildHelper = require("@daybrush/builder");
2 | const vuePlugin = require("rollup-plugin-vue");
3 |
4 | const defaultOptions = {
5 | sourcemap: true,
6 | input: "./src/index.ts",
7 | exports: "named",
8 | plugins: [
9 | vuePlugin(),
10 | ],
11 | external: {
12 | "vue": "Vue",
13 | },
14 | };
15 | module.exports = buildHelper([
16 | {
17 | ...defaultOptions,
18 | format: "es",
19 | output: "./dist/scene.esm.js",
20 | },
21 | {
22 | ...defaultOptions,
23 | format: "cjs",
24 | // input: "./src/index.umd.ts",
25 | exports: "named",
26 | output: "./dist/scene.cjs.js",
27 | },
28 | ]);
29 |
--------------------------------------------------------------------------------
/packages/vue-scenejs/src/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @namespace Vue3Scene
3 | */
4 | export * from "./useScene";
5 | export * from "./useSceneItem";
6 | export * from "./useFrame";
7 | export * from "./useNowFrame";
8 | export * from "scenejs";
9 |
--------------------------------------------------------------------------------
/packages/vue-scenejs/src/useFrame.ts:
--------------------------------------------------------------------------------
1 | import { VueReactiveAdapterResult, useReactive } from "@cfcs/vue3";
2 | import { FRAME_REACTIVE, FrameReactiveData } from "scenejs";
3 |
4 |
5 | /**
6 | * You can use reactive state and frame methods.
7 | * To access the state in Vue you need to add $ prefix.
8 | * @typedef
9 | * @memberof Vue3Scene
10 | * @see Frame
11 | * @extends Reactive.FrameReactiveState
12 | */
13 | export interface VueFrameResult extends VueReactiveAdapterResult { }
14 |
15 | /**
16 | * @memberof Vue3Scene
17 | * @param {Reactive.FrameReactiveData} - Can be used as frame, cssText, cssObject, etc.
18 | * @return - You can use Frame methods and cssText, cssObject, ...etc
19 | * @example
20 | * import { useFrame } from "vue-scenejs";
21 | *
22 | * const { cssText } = useFrame("text-align: center; transform: translate(10px, 10px);");
23 | *
24 | * console.log(cssText.value);
25 | */
26 | export function useFrame(props: FrameReactiveData): VueFrameResult {
27 | return useReactive({
28 | ...FRAME_REACTIVE,
29 | data: () => props,
30 | });
31 | }
32 |
--------------------------------------------------------------------------------
/packages/vue-scenejs/src/useNowFrame.ts:
--------------------------------------------------------------------------------
1 | import { VueReactiveAdapterResult, useReactive } from "@cfcs/vue3";
2 | import { SceneItem, NOW_FRAME_REACTIVE } from "scenejs";
3 |
4 |
5 | /**
6 | * To access the state in Vue you need to add $ prefix.
7 | * @typedef
8 | * @memberof Vue3Scene
9 | * @extends Vue3Scene.ReactFrameResult
10 | */
11 | export interface VueNowFrameResult extends VueReactiveAdapterResult { }
12 |
13 | /**
14 | * @memberof Vue3Scene
15 | * @param - item to get the current frame
16 | * @return - You can use Frame methods and cssText, cssObject, ...etc State
17 | * @example
18 | * import { useSceneItem, useNowFrame } from "vue-scenejs";
19 | *
20 | * const sceneItem = useSceneItem(...);
21 | * const { cssText } = useNowFrame(sceneItem);
22 | *
23 | * console.log(cssText.value);
24 | */
25 | export function useNowFrame(item: SceneItem): VueNowFrameResult {
26 | return useReactive({
27 | ...NOW_FRAME_REACTIVE,
28 | data: () => item,
29 | });
30 | }
31 |
--------------------------------------------------------------------------------
/packages/vue-scenejs/src/useScene.ts:
--------------------------------------------------------------------------------
1 | import { VueReactiveAdapterResult, useReactive } from "@cfcs/vue3";
2 | import { SceneOptions, SceneReactiveProps, SCENE_REACTIVE } from "scenejs";
3 |
4 |
5 | /**
6 | * To access the state in Vue you need to add $ prefix.
7 | * @typedef
8 | * @memberof Vue3Scene
9 | * @extends Reactive.AnimatorReactiveState
10 | */
11 | export interface VueSceneResult extends VueReactiveAdapterResult { }
12 |
13 |
14 | /**
15 | * @memberof Vue3Scene
16 | * @param {Reactive.SceneReactiveProps} - Items and properties that make up the scene
17 | * @param - Scene and Animator options
18 | * @return - You can use Scene methods and Animator State
19 | * @example
20 | * import { useScene, useNowFrame } from "vue-scenejs";
21 | *
22 | * const scene = useScene({ ... });
23 | * const { cssText } = useNowFrame(scene.getItem("a1"));
24 | *
25 | * console.log(cssText.value);
26 | */
27 | export function useScene(props?: SceneReactiveProps, options?: Partial): VueSceneResult {
28 | return useReactive({
29 | ...SCENE_REACTIVE,
30 | data() {
31 | return {
32 | props,
33 | options,
34 | };
35 | },
36 | });
37 | }
38 |
--------------------------------------------------------------------------------
/packages/vue-scenejs/src/useSceneItem.ts:
--------------------------------------------------------------------------------
1 | import { VueReactiveAdapterResult, useReactive } from "@cfcs/vue3";
2 | import { SCENE_ITEM_REACTIVE, SceneItemOptions, SceneItemReactiveProps } from "scenejs";
3 |
4 | /**
5 | * To access the state in Vue you need to add $ prefix.
6 | * @typedef
7 | * @memberof Vue3Scene
8 | * @extends Reactive.AnimatorReactiveState
9 | */
10 | export interface VueSceneItemResult extends VueReactiveAdapterResult { }
11 |
12 | /**
13 | * @memberof Vue3Scene
14 | * @param {Reactive.SceneItemReactiveProps} - Items and properties that make up the scene item
15 | * @param - SceneItem and Animator options
16 | * @return - You can use SceneItem methods and Animator State.
17 | * @example
18 | * import { useSceneItem, useNowFrame } from "vue-scenejs";
19 | *
20 | * const item = useSceneItem({ ... });
21 | * const { cssText } = useNowFrame(item);
22 | *
23 | * console.log(cssText.value);
24 | */
25 | export function useSceneItem(props?: SceneItemReactiveProps, options?: Partial) {
26 | return useReactive({
27 | ...SCENE_ITEM_REACTIVE,
28 | data: () => ({
29 | props,
30 | options,
31 | }),
32 | });
33 | }
34 |
--------------------------------------------------------------------------------
/packages/vue-scenejs/tsconfig.declaration.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig",
3 | "compilerOptions": {
4 | "removeComments": true,
5 | "declaration": true,
6 | "emitDeclarationOnly": true,
7 | "declarationDir": "declaration"
8 | },
9 | "include": [
10 | "src/**/*.ts",
11 | "src/**/*.tsx",
12 | "src/**/*.vue"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/packages/vue-scenejs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "esnext",
5 | "strict": true,
6 | "jsx": "preserve",
7 | "importHelpers": true,
8 | "moduleResolution": "node",
9 | "experimentalDecorators": true,
10 | "esModuleInterop": true,
11 | "allowSyntheticDefaultImports": true,
12 | "sourceMap": true,
13 | "baseUrl": ".",
14 | "types": [
15 | "webpack-env"
16 | ],
17 | "paths": {
18 | "@/*": [
19 | "src/*"
20 | ]
21 | },
22 | "lib": [
23 | "esnext",
24 | "dom",
25 | "dom.iterable",
26 | "scripthost"
27 | ]
28 | },
29 | "include": [
30 | "src/**/*.ts",
31 | "src/**/*.tsx",
32 | "src/**/*.vue",
33 | "tests/**/*.ts",
34 | "tests/**/*.tsx"
35 | ],
36 | "exclude": [
37 | "node_modules"
38 | ]
39 | }
40 |
--------------------------------------------------------------------------------
/packages/vue2-scenejs/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 |
--------------------------------------------------------------------------------
/packages/vue2-scenejs/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: {
4 | node: true
5 | },
6 | 'extends': [
7 | 'plugin:vue/essential',
8 | 'eslint:recommended',
9 | '@vue/typescript'
10 | ],
11 | rules: {
12 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
13 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
14 | },
15 | parserOptions: {
16 | parser: '@typescript-eslint/parser'
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/packages/vue2-scenejs/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 |
4 | # local env files
5 | .env.local
6 | .env.*.local
7 |
8 | # Log files
9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
12 |
13 | # Editor directories and files
14 | .idea
15 | .vscode
16 | *.suo
17 | *.ntvs*
18 | *.njsproj
19 | *.sln
20 | *.sw?
21 |
--------------------------------------------------------------------------------
/packages/vue2-scenejs/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 |
3 | All notable changes to this project will be documented in this file.
4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5 |
6 | ## [1.0.0-beta.11](https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/compare/vue2-scenejs@1.0.0-beta.8...vue2-scenejs@1.0.0-beta.11) (2023-06-05)
7 |
8 |
9 | ### :mega: Other
10 |
11 | * publish packages ([97ba4e7](https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/commit/97ba4e775018179c16b0e5c0035f5a3773b64722))
12 | * publish packages ([f76d778](https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/commit/f76d7782ee508fc12f16d250ca0c925f81d2a0e1))
13 | * publish packages ([2f9e242](https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/commit/2f9e242c926cb13672d7f6d9924ea7782fb69815))
14 |
15 |
16 |
17 | ## [1.0.0-beta.8](https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/compare/vue2-scenejs@1.0.0-beta.3...vue2-scenejs@1.0.0-beta.8) (2023-05-21)
18 |
19 |
20 | ### :rocket: New Features
21 |
22 | * add modules for frameworks ([d1c173d](https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/commit/d1c173d72efba70193fbbcf50d8e9e3edb2629ae))
23 |
24 |
25 | ### :bug: Bug Fix
26 |
27 | * fix frameworks' reactive props ([17f9538](https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/commit/17f9538823dafad9e36673fe7cc5bfa9178a147e))
28 | * fix partial reactive props ([06f063a](https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/commit/06f063acd979e265bee1e09b1971211b65a6aaec))
29 |
30 |
31 | ### :mega: Other
32 |
33 | * publish packages ([b328ba8](https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/commit/b328ba8fbbf552d1d8048c280392be59f12da68b))
34 | * publish packages ([275e338](https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/commit/275e338931d19f3a75faf4c7f0935eeb848f5a9e))
35 | * publish packages ([eb28736](https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/commit/eb2873676adb0fedf18d1e5a52bfdce08552274a))
36 | * publish packages ([0e37841](https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/commit/0e37841738e150d6deb13f501bb715421ab040aa))
37 | * publish packages ([002fc93](https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/commit/002fc93c9536659b5db95527c019f1e3ad32a1f8))
38 |
39 |
40 |
41 | ## [1.0.0-beta.3](https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/compare/vue2-scenejs@1.0.0-beta.2...vue2-scenejs@1.0.0-beta.3) (2022-12-26)
42 |
43 |
44 | ### :mega: Other
45 |
46 | * publish packages ([843ebf6](https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/commit/843ebf6d483549c130db47499d69dd4825118798))
47 |
48 |
49 |
50 | ## 1.0.0-beta.2 (2022-12-21)
51 |
52 |
53 | ### :rocket: New Features
54 |
55 | * Support Vue 2 & Vue 3 frameworks ([a5a0665](https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/commit/a5a066535781d7f690ffb904abf41f6256ebee62))
56 |
57 |
58 | ### :bug: Bug Fix
59 |
60 | * update modules ([30191b8](https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/commit/30191b8e7c195de355d0c01fa9110d6fe0b3df3b))
61 |
62 |
63 | ### :mega: Other
64 |
65 | * publish packages ([1f4a4f3](https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/commit/1f4a4f3719f1789fb91c7e744f4bf8261751944f))
66 | * publish packages ([3b63fde](https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/commit/3b63fde8232cdc6454a8d8fe1a42b6317d614036))
67 |
--------------------------------------------------------------------------------
/packages/vue2-scenejs/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 Daybrush
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/packages/vue2-scenejs/demo/index.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import VueCompositionAPI from '@vue/composition-api';
3 | import App from './App.vue';
4 |
5 | Vue.use(VueCompositionAPI);
6 | new Vue({
7 | render: (h: any) => h(App),
8 | }).$mount('#app');
9 |
--------------------------------------------------------------------------------
/packages/vue2-scenejs/demo/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.vue" {
2 | import Vue from "vue";
3 | export default Vue;
4 | }
5 |
--------------------------------------------------------------------------------
/packages/vue2-scenejs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue2-scenejs",
3 | "version": "1.0.0-beta.11",
4 | "lernaHelperReleaseType": "prerelease",
5 | "lernaHelperPublishTag": "latest",
6 | "description": "A Vue 2 Component that create JavaScript & CSS timeline-based animation with Scene.js.",
7 | "main": "./dist/scene.cjs.js",
8 | "module": "./dist/scene.esm.js",
9 | "sideEffects": false,
10 | "types": "declaration/index.d.ts",
11 | "keywords": [
12 | "vue",
13 | "vue2",
14 | "reactive",
15 | "use",
16 | "scene",
17 | "scene.js",
18 | "scenejs",
19 | "keyframes",
20 | "timeline",
21 | "animate",
22 | "animation",
23 | "css",
24 | "requestAnimationFrame",
25 | "motion"
26 | ],
27 | "scripts": {
28 | "serve": "vue-cli-service serve demo",
29 | "build": "rollup -c && npm run declaration",
30 | "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
31 | "lint": "vue-cli-service lint"
32 | },
33 | "repository": {
34 | "type": "git",
35 | "url": "https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs"
36 | },
37 | "author": "Daybrush",
38 | "bugs": {
39 | "url": "https://github.com/daybrush/scenejs/issues"
40 | },
41 | "homepage": "https://github.com/daybrush/scenejs",
42 | "files": [
43 | "./*",
44 | "dist/*"
45 | ],
46 | "dependencies": {
47 | "@cfcs/vue2": "^0.1.0",
48 | "scenejs": "~1.10.3"
49 | },
50 | "devDependencies": {
51 | "@babel/core": "^7.12.10",
52 | "@daybrush/builder": "^0.2.0",
53 | "@typescript-eslint/parser": "^2.33.0",
54 | "@vue/cli-plugin-typescript": "~4.5.0",
55 | "@vue/cli-service": "~4.5.0",
56 | "@vue/composition-api": "^1.2.4",
57 | "@vue/eslint-config-airbnb": "^5.0.2",
58 | "@vue/eslint-config-prettier": "^6.0.0",
59 | "@vue/eslint-config-typescript": "^5.0.2",
60 | "@vue/test-utils": "^1.0.3",
61 | "babel-eslint": "^10.1.0",
62 | "babel-loader": "^8.2.2",
63 | "print-sizes": "^0.1.0",
64 | "rollup-plugin-vue": "^5.1.9",
65 | "tslib": "^2.3.1",
66 | "typescript": "^4.1.6",
67 | "vue": "2.6.11",
68 | "vue-template-compiler": "2.6.11"
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/packages/vue2-scenejs/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | autoprefixer: {}
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/vue2-scenejs/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/daybrush/scenejs/da1b4eb7c045d3f7133d2bb63fe29d1080be9639/packages/vue2-scenejs/public/favicon.ico
--------------------------------------------------------------------------------
/packages/vue2-scenejs/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | vue-guides
9 |
10 |
11 |
12 | We're sorry but vue-guides doesn't work properly without JavaScript enabled. Please enable it to continue.
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/packages/vue2-scenejs/rollup.config.js:
--------------------------------------------------------------------------------
1 | const buildHelper = require("@daybrush/builder");
2 | const vuePlugin = require("rollup-plugin-vue");
3 |
4 | const defaultOptions = {
5 | sourcemap: true,
6 | input: "./src/index.ts",
7 | exports: "named",
8 | plugins: [
9 | vuePlugin(),
10 | ],
11 | external: {
12 | "vue": "Vue",
13 | },
14 | };
15 | module.exports = buildHelper([
16 | {
17 | ...defaultOptions,
18 | format: "es",
19 | output: "./dist/scene.esm.js",
20 | },
21 | {
22 | ...defaultOptions,
23 | format: "cjs",
24 | // input: "./src/index.umd.ts",
25 | exports: "named",
26 | output: "./dist/scene.cjs.js",
27 | },
28 | ]);
29 |
--------------------------------------------------------------------------------
/packages/vue2-scenejs/src/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @namespace Vue2Scene
3 | */
4 | export * from "./useScene";
5 | export * from "./useSceneItem";
6 | export * from "./useFrame";
7 | export * from "./useNowFrame";
8 | export * from "scenejs";
9 |
--------------------------------------------------------------------------------
/packages/vue2-scenejs/src/useFrame.ts:
--------------------------------------------------------------------------------
1 | import { VueReactiveAdapterResult, useReactive } from "@cfcs/vue2";
2 | import { FRAME_REACTIVE, FrameReactiveData } from "scenejs";
3 |
4 |
5 | /**
6 | * You can use reactive state and frame methods.
7 | * To access the state in Vue you need to add $ prefix.
8 | * @typedef
9 | * @memberof Vue2Scene
10 | * @see Frame
11 | * @extends Reactive.FrameReactiveState
12 | */
13 | export interface VueFrameResult extends VueReactiveAdapterResult { }
14 |
15 | /**
16 | * @memberof Vue2Scene
17 | * @param {Reactive.FrameReactiveData} - Can be used as frame, cssText, cssObject, etc.
18 | * @return - You can use Frame methods and cssText, cssObject, ...etc
19 | * @example
20 | * import { useFrame } from "vue2-scenejs";
21 | *
22 | * const { cssText } = useFrame("text-align: center; transform: translate(10px, 10px);");
23 | *
24 | * console.log(cssText.value);
25 | */
26 | export function useFrame(props: FrameReactiveData): VueFrameResult {
27 | return useReactive({
28 | ...FRAME_REACTIVE,
29 | data: () => props,
30 | });
31 | }
32 |
--------------------------------------------------------------------------------
/packages/vue2-scenejs/src/useNowFrame.ts:
--------------------------------------------------------------------------------
1 | import { VueReactiveAdapterResult, useReactive } from "@cfcs/vue2";
2 | import { SceneItem, NOW_FRAME_REACTIVE } from "scenejs";
3 |
4 |
5 | /**
6 | * To access the state in Vue you need to add $ prefix.
7 | * @typedef
8 | * @memberof Vue2Scene
9 | * @extends Vue2Scene.ReactFrameResult
10 | */
11 | export interface VueNowFrameResult extends VueReactiveAdapterResult { }
12 |
13 | /**
14 | * @memberof Vue2Scene
15 | * @param - item to get the current frame
16 | * @return - You can use Frame methods and cssText, cssObject, ...etc State
17 | * @example
18 | * import { useSceneItem, useNowFrame } from "vue2-scenejs";
19 | *
20 | * const sceneItem = useSceneItem(...);
21 | * const { cssText } = useNowFrame(sceneItem);
22 | *
23 | * console.log(cssText.value);
24 | */
25 | export function useNowFrame(item: SceneItem): VueNowFrameResult {
26 | return useReactive({
27 | ...NOW_FRAME_REACTIVE,
28 | data: () => item,
29 | });
30 | }
31 |
--------------------------------------------------------------------------------
/packages/vue2-scenejs/src/useScene.ts:
--------------------------------------------------------------------------------
1 | import { VueReactiveAdapterResult, useReactive } from "@cfcs/vue2";
2 | import { SceneOptions, SceneReactiveProps, SCENE_REACTIVE } from "scenejs";
3 |
4 |
5 | /**
6 | * To access the state in Vue you need to add $ prefix.
7 | * @typedef
8 | * @memberof Vue2Scene
9 | * @extends Reactive.AnimatorReactiveState
10 | */
11 | export interface VueSceneResult extends VueReactiveAdapterResult { }
12 |
13 |
14 | /**
15 | * @memberof Vue2Scene
16 | * @param {Reactive.SceneReactiveProps} - Items and properties that make up the scene
17 | * @param - Scene and Animator options
18 | * @return - You can use Scene methods and Animator State
19 | * @example
20 | * import { useScene, useNowFrame } from "vue2-scenejs";
21 | *
22 | * const scene = useScene({ ... });
23 | * const { cssText } = useNowFrame(scene.getItem("a1"));
24 | *
25 | * console.log(cssText.value);
26 | */
27 | export function useScene(props?: SceneReactiveProps, options?: Partial): VueSceneResult {
28 | return useReactive({
29 | ...SCENE_REACTIVE,
30 | data() {
31 | return {
32 | props,
33 | options,
34 | };
35 | },
36 | });
37 | }
38 |
--------------------------------------------------------------------------------
/packages/vue2-scenejs/src/useSceneItem.ts:
--------------------------------------------------------------------------------
1 | import { VueReactiveAdapterResult, useReactive } from "@cfcs/vue2";
2 | import { SCENE_ITEM_REACTIVE, SceneItemOptions, SceneItemReactiveProps } from "scenejs";
3 |
4 | /**
5 | * To access the state in Vue you need to add $ prefix.
6 | * @typedef
7 | * @memberof Vue2Scene
8 | * @extends Reactive.AnimatorReactiveState
9 | */
10 | export interface VueSceneItemResult extends VueReactiveAdapterResult { }
11 |
12 | /**
13 | * @memberof Vue2Scene
14 | * @param {Reactive.SceneItemReactiveProps} - Items and properties that make up the scene item
15 | * @param - SceneItem and Animator options
16 | * @return - You can use SceneItem methods and Animator State.
17 | * @example
18 | * import { useSceneItem, useNowFrame } from "vue2-scenejs";
19 | *
20 | * const item = useSceneItem({ ... });
21 | * const { cssText } = useNowFrame(item);
22 | *
23 | * console.log(cssText.value);
24 | */
25 | export function useSceneItem(props?: SceneItemReactiveProps, options?: Partial) {
26 | return useReactive({
27 | ...SCENE_ITEM_REACTIVE,
28 | data: () => ({
29 | props,
30 | options,
31 | }),
32 | });
33 | }
34 |
--------------------------------------------------------------------------------
/packages/vue2-scenejs/tsconfig.declaration.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig",
3 | "compilerOptions": {
4 | "removeComments": true,
5 | "declaration": true,
6 | "emitDeclarationOnly": true,
7 | "declarationDir": "declaration"
8 | },
9 | "include": [
10 | "src/**/*.ts",
11 | "src/**/*.tsx",
12 | ],
13 | }
14 |
--------------------------------------------------------------------------------
/packages/vue2-scenejs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "esnext",
5 | "strict": true,
6 | "jsx": "preserve",
7 | "importHelpers": true,
8 | "moduleResolution": "node",
9 | "experimentalDecorators": true,
10 | "esModuleInterop": true,
11 | "allowSyntheticDefaultImports": true,
12 | "sourceMap": true,
13 | "baseUrl": ".",
14 | "types": [
15 | "webpack-env"
16 | ],
17 | "paths": {
18 | "@/*": [
19 | "src/*"
20 | ]
21 | },
22 | "lib": [
23 | "esnext",
24 | "dom",
25 | "dom.iterable",
26 | "scripthost"
27 | ]
28 | },
29 | "include": [
30 | "src/**/*.ts",
31 | "src/**/*.tsx",
32 | "src/**/*.vue",
33 | "tests/**/*.ts",
34 | "tests/**/*.tsx"
35 | ],
36 | "exclude": [
37 | "node_modules"
38 | ]
39 | }
40 |
--------------------------------------------------------------------------------
/static/scripts/custom.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | window.dataLayer = window.dataLayer || [];
3 | function gtag() { dataLayer.push(arguments); }
4 | gtag('js', new Date());
5 |
6 | gtag('config', 'G-TRBNXHQ0ZF');
7 | var script = document.createElement("script");
8 |
9 | script.src = "https://www.googletagmanager.com/gtag/js?id=G-TRBNXHQ0ZF";
10 |
11 | document.body.appendChild(script);
12 | })();
13 |
--------------------------------------------------------------------------------
4 | 
7 | 
7 | 
8 | 
9 | 
109 |
110 |