keyframekit 1.0.7 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +129 -126
  3. package/dist/KeyframeKit.d.ts +138 -138
  4. package/dist/KeyframeKit.js +293 -293
  5. package/docs/.vitepress/components/Playground/Playground.js +242 -242
  6. package/docs/.vitepress/components/Playground/Playground.vue +206 -206
  7. package/docs/.vitepress/components/Playground/defaultExample.js +175 -175
  8. package/docs/.vitepress/components/Playground/interFont.js +14 -14
  9. package/docs/.vitepress/components/Playground/themes/githubDark.js +401 -401
  10. package/docs/.vitepress/components/Playground/themes/githubLight.js +398 -398
  11. package/docs/.vitepress/components/Playground/themes.js +24 -24
  12. package/docs/.vitepress/config.ts +84 -69
  13. package/docs/.vitepress/referenceNavigation.ts +37 -37
  14. package/docs/.vitepress/theme/base-styles.css +100 -91
  15. package/docs/.vitepress/theme/env.d.ts +5 -5
  16. package/docs/.vitepress/theme/index.ts +39 -39
  17. package/docs/docs/index.md +142 -141
  18. package/docs/docs/public/playground/KeyframeKit/dist/KeyframeKit.d.ts +138 -138
  19. package/docs/docs/public/playground/KeyframeKit/dist/KeyframeKit.js +293 -293
  20. package/docs/docs/reference/_media/LICENSE +21 -21
  21. package/docs/docs/reference/classes/KeyframeEffectParameters.md +95 -95
  22. package/docs/docs/reference/classes/ParsedKeyframes.md +49 -49
  23. package/docs/docs/reference/index.md +20 -20
  24. package/docs/docs/reference/interfaces/KeyframesFactory.md +151 -151
  25. package/docs/docs/reference/navigation.json +63 -63
  26. package/docs/docs/reference/type-aliases/KeyframeArgument.md +9 -9
  27. package/docs/docs/reference/type-aliases/KeyframesFactorySource.md +9 -9
  28. package/docs/docs/reference/type-aliases/ParsedKeyframesRules.md +15 -15
  29. package/docs/docs/reference/variables/default.md +7 -7
  30. package/docs/package.json +25 -25
  31. package/docs/typedoc/plugin-param-names.js +51 -51
  32. package/docs/typedoc.json +62 -62
  33. package/package.json +37 -37
  34. package/src/KeyframeKit.ts +508 -508
  35. package/tsconfig.json +47 -47
  36. package/vercel.json +12 -12
package/docs/.vitepress/components/Playground/Playground.js CHANGED
@@ -1,243 +1,243 @@
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 }
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
243
  }