keyframekit 1.1.9 → 1.2.1
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.
- package/README.md +8 -1
- package/dist/KeyframeKit.d.ts +3 -3
- package/dist/KeyframeKit.d.ts.map +1 -1
- package/dist/KeyframeKit.js +3 -3
- package/dist/KeyframeKit.js.map +1 -1
- package/dist/KeyframeKit.min.js +1 -0
- package/dist/KeyframeKit.min.js.map +1 -0
- package/package.json +7 -4
- package/src/KeyframeKit.ts +6 -6
- package/docs/.vitepress/components/Playground/Playground.js +0 -243
- package/docs/.vitepress/components/Playground/Playground.vue +0 -208
- package/docs/.vitepress/components/Playground/defaultExample.js +0 -175
- package/docs/.vitepress/components/Playground/interFont.js +0 -14
- package/docs/.vitepress/components/Playground/themes/githubDark.js +0 -402
- package/docs/.vitepress/components/Playground/themes/githubLight.js +0 -399
- package/docs/.vitepress/components/Playground/themes.js +0 -24
- package/docs/.vitepress/config.ts +0 -87
- package/docs/.vitepress/referenceNavigation.ts +0 -37
- package/docs/.vitepress/theme/base-styles.css +0 -104
- package/docs/.vitepress/theme/env.d.ts +0 -5
- package/docs/.vitepress/theme/index.ts +0 -40
- package/docs/docs/get-started.md +0 -133
- package/docs/docs/index.md +0 -17
- package/docs/docs/public/icon.png +0 -0
- package/docs/docs/public/og-image.png +0 -0
- package/docs/docs/public/playground/KeyframeKit/dist/KeyframeKit.d.ts +0 -172
- package/docs/docs/public/playground/KeyframeKit/dist/KeyframeKit.d.ts.map +0 -1
- package/docs/docs/public/playground/KeyframeKit/dist/KeyframeKit.js +0 -327
- package/docs/docs/public/playground/KeyframeKit/dist/KeyframeKit.js.map +0 -1
- package/docs/docs/reference/classes/KeyframeEffectParameters.md +0 -97
- package/docs/docs/reference/classes/ParsedKeyframes.md +0 -49
- package/docs/docs/reference/index.md +0 -20
- package/docs/docs/reference/interfaces/KeyframesFactory.md +0 -180
- package/docs/docs/reference/navigation.json +0 -64
- package/docs/docs/reference/type-aliases/CSSStyleSheetSource.md +0 -7
- package/docs/docs/reference/type-aliases/KeyframeArgument.md +0 -9
- package/docs/docs/reference/type-aliases/ParsedKeyframesRules.md +0 -15
- package/docs/docs/reference/variables/default.md +0 -7
- package/docs/package-lock.json +0 -2321
- package/docs/package.json +0 -22
- package/docs/typedoc/plugin-markdown-mdn-links-fix.js +0 -43
- package/docs/typedoc/plugin-param-names.js +0 -17
- package/docs/typedoc.config.js +0 -78
- package/rollup.config.js +0 -42
- package/tsconfig.json +0 -47
- package/vercel.json +0 -14
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Unlock fine-grained control over your CSS animations with JavaScript.
|
|
4
4
|
|
|
5
|
-
[](/dist/KeyframeKit.min.js) [](https://www.npmjs.com/package/keyframekit) [](/LICENSE)
|
|
6
6
|
|
|
7
7
|
## About
|
|
8
8
|
|
|
@@ -10,10 +10,17 @@ The [Web Animations API][2] opens the browser's animation engine to developers a
|
|
|
10
10
|
|
|
11
11
|
## Installation
|
|
12
12
|
|
|
13
|
+
### NPM
|
|
13
14
|
```sh
|
|
14
15
|
npm install keyframekit
|
|
15
16
|
```
|
|
16
17
|
|
|
18
|
+
### CDN
|
|
19
|
+
Import the module directly:
|
|
20
|
+
```js
|
|
21
|
+
import KeyframeKit from 'https://unpkg.com/keyframekit'
|
|
22
|
+
```
|
|
23
|
+
|
|
17
24
|
## Usage
|
|
18
25
|
|
|
19
26
|
### Playing CSS-defined animations with JS
|
package/dist/KeyframeKit.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ export type CSSStyleSheetSource = CSSStyleSheet | StyleSheetList;
|
|
|
2
2
|
declare class KeyframesFactory {
|
|
3
3
|
#private;
|
|
4
4
|
readonly Error: {
|
|
5
|
-
/**
|
|
5
|
+
/** Thrown if keyframes rule name is not a string. */
|
|
6
6
|
readonly KeyframesRuleNameTypeError: {
|
|
7
7
|
new (message?: string): {
|
|
8
8
|
message: string;
|
|
@@ -30,7 +30,7 @@ declare class KeyframesFactory {
|
|
|
30
30
|
};
|
|
31
31
|
isError(error: unknown): error is Error;
|
|
32
32
|
};
|
|
33
|
-
/**
|
|
33
|
+
/** Thrown if source is not a `CSSStyleSheet` or a `StyleSheetList`. */
|
|
34
34
|
readonly SourceTypeError: {
|
|
35
35
|
new (message?: string): {
|
|
36
36
|
message: string;
|
|
@@ -58,7 +58,7 @@ declare class KeyframesFactory {
|
|
|
58
58
|
};
|
|
59
59
|
isError(error: unknown): error is Error;
|
|
60
60
|
};
|
|
61
|
-
/**
|
|
61
|
+
/** Thrown if the stylesheet could not be imported. */
|
|
62
62
|
readonly StyleSheetImportError: {
|
|
63
63
|
new (message?: string): {
|
|
64
64
|
message: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeyframeKit.d.ts","sourceRoot":"","sources":["../src/KeyframeKit.ts"],"names":[],"mappings":"AAgBA,MAAM,MAAM,mBAAmB,GAAG,aAAa,GAAG,cAAc,CAAC;AAEjE,cAAM,gBAAgB;;IAEpB,QAAQ,CAAC,KAAK;QACZ,
|
|
1
|
+
{"version":3,"file":"KeyframeKit.d.ts","sourceRoot":"","sources":["../src/KeyframeKit.ts"],"names":[],"mappings":"AAgBA,MAAM,MAAM,mBAAmB,GAAG,aAAa,GAAG,cAAc,CAAC;AAEjE,cAAM,gBAAgB;;IAEpB,QAAQ,CAAC,KAAK;QACZ,qDAAqD;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAIrD,uEAAuE;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAIvE,sDAAsD;;;;;;;;;;;;;;;;MAI7C;IAGX;;;;;OAKG;IACG,4BAA4B,CAAC,EAAE,QAA0B,EAAE,GAAE;QACjE,QAAQ,CAAC,EAAE,QAAQ,CAAA;KACf;IAWN;;;;;;OAMG;IACG,gBAAgB,CAAC,GAAG,EAAE,MAAM;IAwBlC;;;;;;OAMG;IACH,sBAAsB,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE;QACnD,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,mBAAmB,CAAA;KACxB,GAAG,eAAe,GAAG,SAAS;IA0E/B;;;;;OAKG;IACH,8BAA8B,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE;QAC7C,EAAE,EAAE,mBAAmB,CAAA;KACxB,GAAG,oBAAoB;IAsExB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QACtC,IAAI,EAAE,gBAAgB,CAAA;KACvB,GAAG,eAAe;CAoHpB;;AAED,wBAAsC;AACtC,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAGjC,iFAAiF;AACjF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,EAAE,GAAG,wBAAwB,CAAC;AAErE,8EAA8E;AAC9E,qBAAa,wBAAwB;;IAEnC,SAAS,EAAE,gBAAgB,CAAC;IAC5B,OAAO,EAAE,qBAAqB,CAAC;IAE/B;;;;OAIG;gBACS,EAAE,SAAS,EAAE,OAAY,EAAE,EAAE;QACvC,SAAS,EAAE,gBAAgB,CAAC;QAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,qBAAqB,CAAA;KACzC;IAKD;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,iBAAsB,EAAE,QAA4B,EAAE,EAAE;QACrF,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;QACvB,OAAO,CAAC,EAAE,MAAM,GAAG,qBAAqB,CAAC;QACzC,QAAQ,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;KACpC,GAAG,SAAS;CAqCd;AAGD,qBAAa,eAAe;IAE1B,SAAS,EAAE,QAAQ,EAAE,CAAC;gBAEV,SAAS,EAAE,QAAQ,EAAE;IAIjC;;;OAGG;IACH,gBAAgB,CACd,OAAO,EAAE,MAAM,GAAG,qBAAqB,GAAG,IAAI,GAC7C,wBAAwB;CAwB5B;AAGD,MAAM,MAAM,oBAAoB,GAAG;IACjC,CAAC,QAAQ,EAAE,MAAM,GAAG,eAAe,CAAA;CACpC,CAAC"}
|
package/dist/KeyframeKit.js
CHANGED
|
@@ -12,15 +12,15 @@ const CHARS = {
|
|
|
12
12
|
};
|
|
13
13
|
class KeyframesFactory {
|
|
14
14
|
Error = {
|
|
15
|
-
/**
|
|
15
|
+
/** Thrown if keyframes rule name is not a string. */
|
|
16
16
|
KeyframesRuleNameTypeError: class KeyframesRuleNameTypeError extends TypeError {
|
|
17
17
|
message = `Keyframes rule name must be a string.`;
|
|
18
18
|
},
|
|
19
|
-
/**
|
|
19
|
+
/** Thrown if source is not a `CSSStyleSheet` or a `StyleSheetList`. */
|
|
20
20
|
SourceTypeError: class SourceTypeError extends TypeError {
|
|
21
21
|
message = `Source must be either a CSSStyleSheet or a StyleSheetList.`;
|
|
22
22
|
},
|
|
23
|
-
/**
|
|
23
|
+
/** Thrown if the stylesheet could not be imported. */
|
|
24
24
|
StyleSheetImportError: class StyleSheetImportError extends Error {
|
|
25
25
|
message = `The stylesheet could not be imported.`;
|
|
26
26
|
}
|
package/dist/KeyframeKit.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeyframeKit.js","sourceRoot":"","sources":["../src/KeyframeKit.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,MAAM,KAAK,GAAG;IACZ,YAAY,EAAE,GAAG;IACjB,YAAY,EAAE,GAAG;IACjB,mBAAmB,EAAE,IAAI;IACzB,aAAa,EAAE,UAAU;CACjB,CAAC;AAKX,MAAM,gBAAgB;IAEX,KAAK,GAAG;QACf,
|
|
1
|
+
{"version":3,"file":"KeyframeKit.js","sourceRoot":"","sources":["../src/KeyframeKit.ts"],"names":[],"mappings":"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"}
|
package/dist/KeyframeKit.min.js
CHANGED
|
@@ -3,3 +3,4 @@
|
|
|
3
3
|
* MIT License
|
|
4
4
|
*/
|
|
5
5
|
const e="%",t="-",s="--",r="-webkit-";var o=new class{Error={KeyframesRuleNameTypeError:class extends TypeError{message="Keyframes rule name must be a string."},SourceTypeError:class extends TypeError{message="Source must be either a CSSStyleSheet or a StyleSheetList."},StyleSheetImportError:class extends Error{message="The stylesheet could not be imported."}};async getDocumentStyleSheetsOnLoad({document:e=window.document}={}){return await async function({document:e}){if("complete"===e.readyState)return;const{promise:t,resolve:s}=Promise.withResolvers();function r(){"complete"===e.readyState&&s(null)}const o=["readystatechange",r];e.addEventListener(...o),await t,e.removeEventListener(...o)}({document:e}),e.styleSheets}async importStyleSheet(e){const t=await fetch(e);if(!t.ok)throw new this.Error.StyleSheetImportError;const s=await t.text(),r=e.split("/").slice(0,-1).join("/"),o=new CSSStyleSheet({baseURL:r});return await o.replace(s),o}getStyleSheetKeyframes({of:e,in:t}){if("string"!=typeof e)throw new this.Error.KeyframesRuleNameTypeError;if(t instanceof StyleSheetList)return this.#e({of:e,styleSheetList:t});if(t instanceof CSSStyleSheet)return this.#t({of:e,styleSheet:t});throw new this.Error.SourceTypeError}#e({of:e,styleSheetList:t}){for(const s of t){const t=this.#t({of:e,styleSheet:s});if(void 0!==t)return t}}#t({of:e,styleSheet:t}){for(const s of t.cssRules)if(s instanceof CSSKeyframesRule&&s.name===e){return this.parseKeyframesRule({rule:s})}}getAllStyleSheetKeyframesRules({in:e}){if(e instanceof StyleSheetList)return this.#s({styleSheetList:e});if(e instanceof CSSStyleSheet)return this.#r({styleSheet:e});throw new this.Error.SourceTypeError}#s({styleSheetList:e}){let t={};for(const s of e){const e=this.#r({styleSheet:s});t={...t,...e}}return t}#r({styleSheet:e}){let t={};for(const s of e.cssRules){if(!(s instanceof CSSKeyframesRule))continue;const e=this.parseKeyframesRule({rule:s});t[s.name]=e}return t}parseKeyframesRule({rule:t}){let s=[];for(const r of t){const t=l({of:r.keyText,suffix:e}),o=Number(t)/100;let n={};for(const e of r.style){const t=r.style.getPropertyValue(e);n[this.#o(e)]=t}const i={...n,offset:o};s.push(i)}return new i(s)}#o(e){if(this.#n(e))return e;if("float"===e)return"cssFloat";if("offset"===e)return"cssOffset";const t=this.#i(e);return this.#l(e,t)}#l(e,s=!1){let r="",o=!1;s&&(e=e.slice(1));for(const s of e)s===t?o=!0:o?(o=!1,r+=s.toUpperCase()):r+=s;return r}#n(e){return e.startsWith(s)&&e!==s}#i(e){return e.startsWith(r)}};class n{keyframes;options;constructor({keyframes:e,options:t={}}){this.keyframes=e,this.options=this.#a(t)}toAnimation({target:e,options:t={},timeline:s=document.timeline}){t=this.#a(t);const r={...this.options,...t},o=new KeyframeEffect(e,this.keyframes,r);return new Animation(o,s)}#a(e){return"number"==typeof e?{duration:e}:e}}class i{keyframes;constructor(e){this.keyframes=e}toKeyframeEffect(e){let t;return t=new n(null!==e?{keyframes:this.keyframes,options:e}:{keyframes:this.keyframes}),t}}function l({of:e,suffix:t}){return e.slice(0,-t.length)}export{n as KeyframeEffectParameters,i as ParsedKeyframes,o as default};
|
|
6
|
+
//# sourceMappingURL=KeyframeKit.min.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KeyframeKit.min.js","sources":["../src/KeyframeKit.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAQA"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "keyframekit",
|
|
3
|
-
"version": "1.1
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "Unlock fine-grained control over your CSS animations with JavaScript.",
|
|
5
5
|
"main": "./dist/KeyframeKit.js",
|
|
6
6
|
"scripts": {
|
|
7
|
-
"build": "tsc && rollup -c
|
|
8
|
-
"docs:bump": "(cd docs && npm run bump)"
|
|
9
|
-
"docs:build": "(cd docs && npm run build)"
|
|
7
|
+
"build": "tsc && rollup -c",
|
|
8
|
+
"docs:bump": "(cd docs && npm run bump)"
|
|
10
9
|
},
|
|
10
|
+
"files": [
|
|
11
|
+
"src",
|
|
12
|
+
"dist"
|
|
13
|
+
],
|
|
11
14
|
"repository": {
|
|
12
15
|
"type": "git",
|
|
13
16
|
"url": "git+https://github.com/benhatsor/KeyframeKit.git"
|
package/src/KeyframeKit.ts
CHANGED
|
@@ -19,15 +19,15 @@ export type CSSStyleSheetSource = CSSStyleSheet | StyleSheetList;
|
|
|
19
19
|
class KeyframesFactory {
|
|
20
20
|
|
|
21
21
|
readonly Error = {
|
|
22
|
-
/**
|
|
22
|
+
/** Thrown if keyframes rule name is not a string. */
|
|
23
23
|
KeyframesRuleNameTypeError: class KeyframesRuleNameTypeError extends TypeError {
|
|
24
24
|
message = `Keyframes rule name must be a string.`;
|
|
25
25
|
},
|
|
26
|
-
/**
|
|
26
|
+
/** Thrown if source is not a `CSSStyleSheet` or a `StyleSheetList`. */
|
|
27
27
|
SourceTypeError: class SourceTypeError extends TypeError {
|
|
28
28
|
message = `Source must be either a CSSStyleSheet or a StyleSheetList.`;
|
|
29
29
|
},
|
|
30
|
-
/**
|
|
30
|
+
/** Thrown if the stylesheet could not be imported. */
|
|
31
31
|
StyleSheetImportError: class StyleSheetImportError extends Error {
|
|
32
32
|
message = `The stylesheet could not be imported.`;
|
|
33
33
|
}
|
|
@@ -271,6 +271,9 @@ class KeyframesFactory {
|
|
|
271
271
|
const offset = percent / 100;
|
|
272
272
|
|
|
273
273
|
|
|
274
|
+
/** https://drafts.csswg.org/web-animations-1/#processing-a-keyframes-argument */
|
|
275
|
+
type KeyframeProperties = { [propertyName: string]: string };
|
|
276
|
+
|
|
274
277
|
let parsedProperties: KeyframeProperties = {};
|
|
275
278
|
|
|
276
279
|
for (const propertyName of keyframe.style) {
|
|
@@ -371,9 +374,6 @@ class KeyframesFactory {
|
|
|
371
374
|
export default new KeyframesFactory();
|
|
372
375
|
export type { KeyframesFactory };
|
|
373
376
|
|
|
374
|
-
/** https://drafts.csswg.org/web-animations-1/#processing-a-keyframes-argument */
|
|
375
|
-
type KeyframeProperties = { [propertyName: string]: string };
|
|
376
|
-
|
|
377
377
|
|
|
378
378
|
/** https://drafts.csswg.org/web-animations-1/#processing-a-keyframes-argument */
|
|
379
379
|
export type KeyframeArgument = Keyframe[] | PropertyIndexedKeyframes;
|
|
@@ -1,243 +0,0 @@
|
|
|
1
|
-
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
|
2
|
-
|
|
3
|
-
import { themes } from './themes.js'
|
|
4
|
-
//import * as monaco from 'monaco-editor'
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
import loader from '@monaco-editor/loader'
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
const langMap = { HTML: 'html', CSS: 'css', JS: 'javascript' }
|
|
11
|
-
|
|
12
|
-
export function playground(props, previewFrame, getDefaultExample, interFontDec) {
|
|
13
|
-
const tabs = ['JS', 'CSS', 'HTML']
|
|
14
|
-
const activeTab = ref('JS')
|
|
15
|
-
const code = ref({ HTML: '', CSS: '', JS: '' })
|
|
16
|
-
const isLoaded = ref(false);
|
|
17
|
-
|
|
18
|
-
const libCode = {
|
|
19
|
-
decLibSrc: '',
|
|
20
|
-
libImportMap: ''
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
const editorRefs = {}
|
|
24
|
-
const editorInstances = {}
|
|
25
|
-
|
|
26
|
-
const models = {}
|
|
27
|
-
|
|
28
|
-
function setEditorRef(tab, el) {
|
|
29
|
-
if (el) editorRefs[tab] = el
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
let updateTimer = null
|
|
33
|
-
function scheduleUpdate() {
|
|
34
|
-
if (updateTimer !== null) clearTimeout(updateTimer)
|
|
35
|
-
updateTimer = setTimeout(updatePreview, 300)
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
function updatePreview() {
|
|
39
|
-
|
|
40
|
-
if (!previewFrame.value) return;
|
|
41
|
-
|
|
42
|
-
const doc = `
|
|
43
|
-
<!DOCTYPE html>
|
|
44
|
-
<html>
|
|
45
|
-
<head>
|
|
46
|
-
<base href="${window.location.href}">
|
|
47
|
-
<style>${code.value.CSS}</style>
|
|
48
|
-
<link rel="stylesheet" href="${interFontDec}">
|
|
49
|
-
</head>
|
|
50
|
-
<body>
|
|
51
|
-
${code.value.HTML}
|
|
52
|
-
${libCode.libImportMap}
|
|
53
|
-
<script type="module">${code.value.JS}<\/script>
|
|
54
|
-
</body>
|
|
55
|
-
</html>`
|
|
56
|
-
const blob = new Blob([doc], { type: 'text/html' })
|
|
57
|
-
previewFrame.value.src = URL.createObjectURL(blob)
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
function addLibrary(monaco) {
|
|
61
|
-
|
|
62
|
-
// validation settings
|
|
63
|
-
monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
|
|
64
|
-
noSemanticValidation: false,
|
|
65
|
-
noSyntaxValidation: false
|
|
66
|
-
});
|
|
67
|
-
|
|
68
|
-
// compiler options
|
|
69
|
-
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
|
|
70
|
-
target: 'esnext',
|
|
71
|
-
module: 'esnext',
|
|
72
|
-
allowNonTsExtensions: true,
|
|
73
|
-
allowImportingTsExtensions: true,
|
|
74
|
-
paths: {
|
|
75
|
-
"keyframekit": ["file:///KeyframeKit"]
|
|
76
|
-
},
|
|
77
|
-
baseUrl: './',
|
|
78
|
-
});
|
|
79
|
-
|
|
80
|
-
const decLibModel = createModel(
|
|
81
|
-
libCode.decLibSrc,
|
|
82
|
-
'typescript',
|
|
83
|
-
'file:///KeyframeKit.d.ts',
|
|
84
|
-
monaco
|
|
85
|
-
);
|
|
86
|
-
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
function createModel(srcStr, language, uriStr, monaco) {
|
|
90
|
-
|
|
91
|
-
const uri = monaco.Uri.parse(uriStr);
|
|
92
|
-
|
|
93
|
-
const existing = monaco.editor.getModel(uri)
|
|
94
|
-
|
|
95
|
-
if (existing) existing.dispose()
|
|
96
|
-
|
|
97
|
-
const model = monaco.editor.createModel(srcStr, language, uri);
|
|
98
|
-
|
|
99
|
-
models[uriStr] = model;
|
|
100
|
-
|
|
101
|
-
return model;
|
|
102
|
-
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
function applyTheme(monaco) {
|
|
106
|
-
const dark = document.documentElement.classList.contains('dark')
|
|
107
|
-
monaco.editor.setTheme(dark ? 'vp-dark' : 'vp-light')
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
function watchTheme(monaco) {
|
|
111
|
-
applyTheme(monaco)
|
|
112
|
-
new MutationObserver(() => applyTheme(monaco))
|
|
113
|
-
.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
onMounted(async () => {
|
|
117
|
-
|
|
118
|
-
const isTouchDevice = window.matchMedia('(hover: none)').matches;
|
|
119
|
-
|
|
120
|
-
code.value = getDefaultExample({ isTouchDevice });
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
// note: the absolute URLs here are important, because if they were relative,
|
|
124
|
-
// they would return an invalid response when navigating from another page due to a vue bug.
|
|
125
|
-
|
|
126
|
-
libCode.decLibSrc = await (await fetch('/playground/KeyframeKit/dist/KeyframeKit.d.ts')).text();
|
|
127
|
-
|
|
128
|
-
const jsLibSrc = await (await fetch('/playground/KeyframeKit/dist/KeyframeKit.js')).text();
|
|
129
|
-
|
|
130
|
-
libCode.libImportMap = `
|
|
131
|
-
<script type="importmap">
|
|
132
|
-
{
|
|
133
|
-
"imports": {
|
|
134
|
-
"keyframekit": "data:text/javascript;base64,${btoa(jsLibSrc)}"
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
</script>
|
|
138
|
-
`;
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
updatePreview()
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
//const monaco = await import('monaco-editor')
|
|
145
|
-
|
|
146
|
-
loader.config({
|
|
147
|
-
paths: {
|
|
148
|
-
vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs'
|
|
149
|
-
}
|
|
150
|
-
})
|
|
151
|
-
|
|
152
|
-
const monaco = await loader.init()
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
const config = {
|
|
156
|
-
fontSize: 16,
|
|
157
|
-
fontFamily: 'var(--vp-font-family-mono)',
|
|
158
|
-
minimap: { enabled: false },
|
|
159
|
-
scrollBeyondLastLine: false,
|
|
160
|
-
padding: { top: 20, bottom: 20 },
|
|
161
|
-
automaticLayout: true,
|
|
162
|
-
fixedOverflowWidgets: true,
|
|
163
|
-
renderLineHighlightOnlyWhenFocus: true,
|
|
164
|
-
|
|
165
|
-
inertialScroll: isTouchDevice,
|
|
166
|
-
mouseWheelScrollSensitivity: isTouchDevice ? 10 : 1,
|
|
167
|
-
scrollPredominantAxis: !isTouchDevice,
|
|
168
|
-
smoothScrolling: isTouchDevice,
|
|
169
|
-
contextmenu: !isTouchDevice,
|
|
170
|
-
|
|
171
|
-
tabSize: 2,
|
|
172
|
-
lineNumbers: "off",
|
|
173
|
-
scrollbar: {
|
|
174
|
-
ignoreHorizontalScrollbarInContentHeight: true
|
|
175
|
-
},
|
|
176
|
-
lightbulb: {
|
|
177
|
-
enabled: 'off'
|
|
178
|
-
}
|
|
179
|
-
};
|
|
180
|
-
|
|
181
|
-
monaco.editor.defineTheme('vp-dark', themes.dark);
|
|
182
|
-
monaco.editor.defineTheme('vp-light', themes.light);
|
|
183
|
-
|
|
184
|
-
watchTheme(monaco);
|
|
185
|
-
|
|
186
|
-
addLibrary(monaco);
|
|
187
|
-
|
|
188
|
-
tabs.forEach(tab => {
|
|
189
|
-
|
|
190
|
-
let instance;
|
|
191
|
-
|
|
192
|
-
if (langMap[tab] === 'javascript') {
|
|
193
|
-
|
|
194
|
-
// Mark as lang: typescript so we can see the full type annotations on hover,
|
|
195
|
-
// but prefix the file with .js so as to not allow actual type annotations in the file's code.
|
|
196
|
-
const mainModel = createModel(
|
|
197
|
-
code.value[tab],
|
|
198
|
-
'typescript',
|
|
199
|
-
'file:///main.js',
|
|
200
|
-
monaco
|
|
201
|
-
);
|
|
202
|
-
|
|
203
|
-
instance = monaco.editor.create(editorRefs[tab], {
|
|
204
|
-
model: mainModel,
|
|
205
|
-
...config
|
|
206
|
-
});
|
|
207
|
-
|
|
208
|
-
} else {
|
|
209
|
-
|
|
210
|
-
instance = monaco.editor.create(editorRefs[tab], {
|
|
211
|
-
value: code.value[tab],
|
|
212
|
-
language: langMap[tab],
|
|
213
|
-
...config
|
|
214
|
-
})
|
|
215
|
-
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
instance.onDidChangeModelContent(() => {
|
|
219
|
-
code.value[tab] = instance.getValue()
|
|
220
|
-
scheduleUpdate()
|
|
221
|
-
})
|
|
222
|
-
|
|
223
|
-
editorInstances[tab] = instance
|
|
224
|
-
|
|
225
|
-
})
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
isLoaded.value = true;
|
|
229
|
-
|
|
230
|
-
})
|
|
231
|
-
|
|
232
|
-
onBeforeUnmount(() => {
|
|
233
|
-
|
|
234
|
-
Object.values(editorInstances).forEach(e => e.dispose())
|
|
235
|
-
|
|
236
|
-
Object.values(models).forEach(e => e.dispose())
|
|
237
|
-
|
|
238
|
-
if (updateTimer) clearTimeout(updateTimer)
|
|
239
|
-
|
|
240
|
-
})
|
|
241
|
-
|
|
242
|
-
return { tabs, activeTab, setEditorRef, isLoaded }
|
|
243
|
-
}
|
|
@@ -1,208 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="playground" :class="{ loaded: isLoaded === true }">
|
|
3
|
-
<div class="editor-pane">
|
|
4
|
-
<div class="tabs">
|
|
5
|
-
<button
|
|
6
|
-
v-for="tab in tabs"
|
|
7
|
-
:key="tab"
|
|
8
|
-
class="tab"
|
|
9
|
-
:class="{ active: activeTab === tab }"
|
|
10
|
-
@click="activeTab = tab"
|
|
11
|
-
>
|
|
12
|
-
{{ tab }}
|
|
13
|
-
</button>
|
|
14
|
-
</div>
|
|
15
|
-
<div class="editor-container">
|
|
16
|
-
|
|
17
|
-
<div
|
|
18
|
-
v-for="tab in tabs"
|
|
19
|
-
:key="tab"
|
|
20
|
-
:ref="el => setEditorRef(tab, el)"
|
|
21
|
-
class="editor-mount"
|
|
22
|
-
:style="{ visibility: activeTab === tab ? 'visible' : 'hidden' }"
|
|
23
|
-
/>
|
|
24
|
-
|
|
25
|
-
<svg class="loader" width="18" height="18" viewBox="0 0 100 100"><rect fill="#555555" height="10" opacity="0" rx="5" ry="5" transform="rotate(-90 50 50)" width="28" x="67" y="45"></rect><rect fill="#555555" height="10" opacity="0.125" rx="5" ry="5" transform="rotate(-45 50 50)" width="28" x="67" y="45"></rect><rect fill="#555555" height="10" opacity="0.25" rx="5" ry="5" transform="rotate(0 50 50)" width="28" x="67" y="45"></rect><rect fill="#555555" height="10" opacity="0.375" rx="5" ry="5" transform="rotate(45 50 50)" width="28" x="67" y="45"></rect><rect fill="#555555" height="10" opacity="0.5" rx="5" ry="5" transform="rotate(90 50 50)" width="28" x="67" y="45"></rect><rect fill="#555555" height="10" opacity="0.625" rx="5" ry="5" transform="rotate(135 50 50)" width="28" x="67" y="45"></rect><rect fill="#555555" height="10" opacity="0.75" rx="5" ry="5" transform="rotate(180 50 50)" width="28" x="67" y="45"></rect><rect fill="#555555" height="10" opacity="0.875" rx="5" ry="5" transform="rotate(225 50 50)" width="28" x="67" y="45"></rect></svg>
|
|
26
|
-
|
|
27
|
-
</div>
|
|
28
|
-
</div>
|
|
29
|
-
|
|
30
|
-
<div class="preview-pane">
|
|
31
|
-
<iframe ref="previewFrame" class="preview-frame" sandbox="allow-scripts" />
|
|
32
|
-
</div>
|
|
33
|
-
</div>
|
|
34
|
-
</template>
|
|
35
|
-
|
|
36
|
-
<script setup>
|
|
37
|
-
import { ref } from 'vue'
|
|
38
|
-
import { playground } from './Playground.js'
|
|
39
|
-
|
|
40
|
-
import { getDefaultExample } from './defaultExample.js';
|
|
41
|
-
//import * as libCode from './libCode.js';
|
|
42
|
-
|
|
43
|
-
import { interFontDec } from './interFont.js';
|
|
44
|
-
|
|
45
|
-
const props = defineProps({
|
|
46
|
-
//initialHtml: { type: String, default: defaultExample.html },
|
|
47
|
-
//initialCss: { type: String, default: defaultExample.css },
|
|
48
|
-
//initialJs: { type: String, default: defaultExample.js },
|
|
49
|
-
|
|
50
|
-
//decLibSrc: { type: String, default: libCode.decLibSrc },
|
|
51
|
-
//libImportMap: { type: String, default: libCode.libImportMap }
|
|
52
|
-
})
|
|
53
|
-
|
|
54
|
-
const previewFrame = ref(null)
|
|
55
|
-
const { tabs, activeTab, isLoaded, setEditorRef } = playground(props, previewFrame, getDefaultExample, interFontDec)
|
|
56
|
-
</script>
|
|
57
|
-
|
|
58
|
-
<style scoped>
|
|
59
|
-
.playground {
|
|
60
|
-
display: flex;
|
|
61
|
-
height: 500px;
|
|
62
|
-
--border-radius: 8px;
|
|
63
|
-
border-radius: var(--border-radius);
|
|
64
|
-
overflow: hidden;
|
|
65
|
-
/* margin-bottom: 48px; */
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
@media (max-width: 1000px) {
|
|
69
|
-
.playground {
|
|
70
|
-
flex-flow: column-reverse;
|
|
71
|
-
}
|
|
72
|
-
.playground .preview-pane {
|
|
73
|
-
border-bottom-width: 0;
|
|
74
|
-
border-left-width: 1px;
|
|
75
|
-
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
@media (max-width: 640px) {
|
|
80
|
-
.playground {
|
|
81
|
-
margin-left: -24px;
|
|
82
|
-
margin-right: -24px;
|
|
83
|
-
--border-radius: 0;
|
|
84
|
-
}
|
|
85
|
-
.playground .preview-pane {
|
|
86
|
-
border-right-width: 0;
|
|
87
|
-
border-left-width: 0;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
/*
|
|
92
|
-
@media (min-width: 640px) {
|
|
93
|
-
.playground {
|
|
94
|
-
margin-bottom: 64px;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
*/
|
|
98
|
-
|
|
99
|
-
.editor-pane {
|
|
100
|
-
display: flex;
|
|
101
|
-
flex-direction: column;
|
|
102
|
-
background: var(--vp-code-block-bg);
|
|
103
|
-
flex: 1;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.tabs {
|
|
107
|
-
display: flex;
|
|
108
|
-
flex-shrink: 0;
|
|
109
|
-
padding: 0 12px;
|
|
110
|
-
background-color: var(--vp-code-tab-bg);
|
|
111
|
-
box-shadow: inset 0 -1px var(--vp-code-tab-divider);
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.tab {
|
|
115
|
-
position: relative;
|
|
116
|
-
display: inline-block;
|
|
117
|
-
border-bottom: 1px solid transparent;
|
|
118
|
-
padding: 0 12px;
|
|
119
|
-
line-height: 48px;
|
|
120
|
-
font-size: 14px;
|
|
121
|
-
font-weight: 500;
|
|
122
|
-
color: var(--vp-code-tab-text-color);
|
|
123
|
-
white-space: nowrap;
|
|
124
|
-
cursor: pointer;
|
|
125
|
-
transition: color 0.25s;
|
|
126
|
-
}
|
|
127
|
-
.tab:hover {
|
|
128
|
-
color: var(--vp-code-tab-hover-text-color);
|
|
129
|
-
}
|
|
130
|
-
.tab.active {
|
|
131
|
-
color: var(--vp-code-tab-active-text-color);
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.tab::after {
|
|
135
|
-
position: absolute;
|
|
136
|
-
right: 8px;
|
|
137
|
-
bottom: -1px;
|
|
138
|
-
left: 8px;
|
|
139
|
-
z-index: 1;
|
|
140
|
-
height: 2px;
|
|
141
|
-
border-radius: 2px;
|
|
142
|
-
content: '';
|
|
143
|
-
background-color: transparent;
|
|
144
|
-
/* transition: background-color 0.25s; */
|
|
145
|
-
}
|
|
146
|
-
.tab.active::after {
|
|
147
|
-
background-color: var(--vp-code-tab-active-bar-color);
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.editor-container {
|
|
151
|
-
flex: 1;
|
|
152
|
-
/* overflow: hidden; */
|
|
153
|
-
position: relative;
|
|
154
|
-
}
|
|
155
|
-
.editor-mount {
|
|
156
|
-
width: 100%;
|
|
157
|
-
height: 100%;
|
|
158
|
-
position: absolute;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
.editor-container .loader {
|
|
162
|
-
translate: -50% -50%;
|
|
163
|
-
left: 50%;
|
|
164
|
-
top: 50%;
|
|
165
|
-
position: relative;
|
|
166
|
-
color: var(--vp-c-text-2);
|
|
167
|
-
pointer-events: none;
|
|
168
|
-
animation: spin8 0.8s steps(8) infinite;
|
|
169
|
-
transition: .18s ease-in-out .18s opacity;
|
|
170
|
-
|
|
171
|
-
@starting-style {
|
|
172
|
-
opacity: 0;
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.editor-container .loader rect {
|
|
177
|
-
fill: currentColor;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
.playground.loaded .loader {
|
|
181
|
-
display: none;
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
@keyframes spin8 {
|
|
185
|
-
from {
|
|
186
|
-
transform: rotate(180deg);
|
|
187
|
-
}
|
|
188
|
-
to {
|
|
189
|
-
transform: rotate(540deg);
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
.preview-pane {
|
|
194
|
-
border: 1px solid var(--vp-code-block-bg);
|
|
195
|
-
border-left-width: 0;
|
|
196
|
-
flex: 1;
|
|
197
|
-
display: flex;
|
|
198
|
-
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
|
199
|
-
overflow: hidden;
|
|
200
|
-
background: #f0f7ff;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
.preview-frame {
|
|
204
|
-
flex: 1;
|
|
205
|
-
width: 100%;
|
|
206
|
-
border: none;
|
|
207
|
-
}
|
|
208
|
-
</style>
|