npm - keyframekit - Versions diffs - 1.0.0 - Mend

keyframekit 1.0.0

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 (41) hide show

package/LICENSE +21 -0
package/README.md +122 -0
package/dist/KeyframeKit.d.ts +139 -0
package/dist/KeyframeKit.d.ts.map +1 -0
package/dist/KeyframeKit.js +294 -0
package/dist/KeyframeKit.js.map +1 -0
package/docs/.vitepress/components/Playground/Playground.js +243 -0
package/docs/.vitepress/components/Playground/Playground.vue +206 -0
package/docs/.vitepress/components/Playground/defaultExample.js +175 -0
package/docs/.vitepress/components/Playground/interFont.js +14 -0
package/docs/.vitepress/components/Playground/themes/githubDark.js +402 -0
package/docs/.vitepress/components/Playground/themes/githubLight.js +399 -0
package/docs/.vitepress/components/Playground/themes.js +24 -0
package/docs/.vitepress/config.ts +64 -0
package/docs/.vitepress/referenceNavigation.ts +37 -0
package/docs/.vitepress/theme/base-styles.css +91 -0
package/docs/.vitepress/theme/env.d.ts +5 -0
package/docs/.vitepress/theme/index.ts +40 -0
package/docs/docs/index.md +136 -0
package/docs/docs/public/icon.png +0 -0
package/docs/docs/public/playground/KeyframeKit/dist/KeyframeKit.d.ts +139 -0
package/docs/docs/public/playground/KeyframeKit/dist/KeyframeKit.d.ts.map +1 -0
package/docs/docs/public/playground/KeyframeKit/dist/KeyframeKit.js +294 -0
package/docs/docs/public/playground/KeyframeKit/dist/KeyframeKit.js.map +1 -0
package/docs/docs/reference/_media/LICENSE +21 -0
package/docs/docs/reference/classes/KeyframeEffectParameters.md +95 -0
package/docs/docs/reference/classes/ParsedKeyframes.md +49 -0
package/docs/docs/reference/index.md +20 -0
package/docs/docs/reference/interfaces/KeyframesFactory.md +151 -0
package/docs/docs/reference/navigation.json +64 -0
package/docs/docs/reference/type-aliases/KeyframeArgument.md +9 -0
package/docs/docs/reference/type-aliases/KeyframesFactorySource.md +9 -0
package/docs/docs/reference/type-aliases/ParsedKeyframesRules.md +15 -0
package/docs/docs/reference/variables/default.md +7 -0
package/docs/package.json +25 -0
package/docs/typedoc/plugin-param-names.js +52 -0
package/docs/typedoc.json +63 -0
package/package.json +37 -0
package/src/KeyframeKit.ts +508 -0
package/tsconfig.json +47 -0
package/vercel.json +13 -0

package/docs/.vitepress/components/Playground/Playground.js ADDED Viewed

@@ -0,0 +1,243 @@
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { themes } from './themes.js'
+//import * as monaco from 'monaco-editor'
+import loader from '@monaco-editor/loader'
+const langMap = { HTML: 'html', CSS: 'css', JS: 'javascript' }
+export function playground(props, previewFrame, getDefaultExample, interFontDec) {
+  const tabs = ['JS', 'CSS', 'HTML']
+  const activeTab = ref('JS')
+  const code = ref({ HTML: '', CSS: '', JS: '' })
+  const isLoaded = ref(false);
+  const libCode = {
+    decLibSrc: '',
+    libImportMap: ''
+  };
+  const editorRefs = {}
+  const editorInstances = {}
+  const models = {}
+  function setEditorRef(tab, el) {
+    if (el) editorRefs[tab] = el
+  }
+  let updateTimer = null
+  function scheduleUpdate() {
+    if (updateTimer !== null) clearTimeout(updateTimer)
+    updateTimer = setTimeout(updatePreview, 300)
+  }
+  function updatePreview() {
+    if (!previewFrame.value) return;
+    const doc = `
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="${window.location.href}">
+    <style>${code.value.CSS}</style>
+    <link rel="stylesheet" href="${interFontDec}">
+  </head>
+  <body>
+    ${code.value.HTML}
+    ${libCode.libImportMap}
+    <script type="module">${code.value.JS}<\/script>
+  </body>
+</html>`
+    const blob = new Blob([doc], { type: 'text/html' })
+    previewFrame.value.src = URL.createObjectURL(blob)
+  }
+  function addLibrary(monaco) {
+    // validation settings
+    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: false,
+      noSyntaxValidation: false
+    });
+    // compiler options
+    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+      target: 'esnext',
+      module: 'esnext',
+      allowNonTsExtensions: true,
+      allowImportingTsExtensions: true,
+      paths: {
+        "keyframekit": ["file:///KeyframeKit"]
+      },
+      baseUrl: './',
+    });
+    const decLibModel = createModel(
+      libCode.decLibSrc,
+      'typescript',
+      'file:///KeyframeKit.d.ts',
+      monaco
+    );
+  }
+  function createModel(srcStr, language, uriStr, monaco) {
+    const uri = monaco.Uri.parse(uriStr);
+    const existing = monaco.editor.getModel(uri)
+    if (existing) existing.dispose()
+    const model = monaco.editor.createModel(srcStr, language, uri);
+    models[uriStr] = model;
+    return model;
+  }
+  function applyTheme(monaco) {
+    const dark = document.documentElement.classList.contains('dark')
+    monaco.editor.setTheme(dark ? 'vp-dark' : 'vp-light')
+  }
+  function watchTheme(monaco) {
+    applyTheme(monaco)
+    new MutationObserver(() => applyTheme(monaco))
+      .observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+  }
+  onMounted(async () => {
+    const isTouchDevice = window.matchMedia('(hover: none)').matches;
+    code.value = getDefaultExample({ isTouchDevice });
+    // note: the absolute URLs here are important, because if they were relative,
+    // they would return an invalid response when navigating from another page due to a vue bug.
+    libCode.decLibSrc = await (await fetch('/playground/KeyframeKit/dist/KeyframeKit.d.ts')).text();
+    const jsLibSrc = await (await fetch('/playground/KeyframeKit/dist/KeyframeKit.js')).text();
+    libCode.libImportMap = `
+    <script type="importmap">
+    {
+      "imports": {
+        "keyframekit": "data:text/javascript;base64,${btoa(jsLibSrc)}"
+      }
+    }
+    </script>
+    `;
+    updatePreview()
+    //const monaco = await import('monaco-editor')
+    loader.config({
+      paths: {
+        vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs'
+      }
+    })
+    const monaco = await loader.init()
+    const config = {
+      fontSize: 16,
+      fontFamily: 'var(--vp-font-family-mono)',
+      minimap: { enabled: false },
+      scrollBeyondLastLine: false,
+      padding: { top: 20, bottom: 20 },
+      automaticLayout: true,
+      fixedOverflowWidgets: true,
+      renderLineHighlightOnlyWhenFocus: true,
+      inertialScroll: isTouchDevice,
+      mouseWheelScrollSensitivity: isTouchDevice ? 10 : 1,
+      scrollPredominantAxis: !isTouchDevice,
+      smoothScrolling: isTouchDevice,
+      contextmenu: !isTouchDevice,
+      tabSize: 2,
+      lineNumbers: "off",
+      scrollbar: {
+        ignoreHorizontalScrollbarInContentHeight: true
+      },
+      lightbulb: {
+        enabled: 'off'
+      }
+    };
+    monaco.editor.defineTheme('vp-dark', themes.dark);
+    monaco.editor.defineTheme('vp-light', themes.light);
+    watchTheme(monaco);
+    addLibrary(monaco);
+    tabs.forEach(tab => {
+      let instance;
+      if (langMap[tab] === 'javascript') {
+        // Mark as lang: typescript so we can see the full type annotations on hover,
+        // but prefix the file with .js so as to not allow actual type annotations in the file's code.
+        const mainModel = createModel(
+          code.value[tab],
+          'typescript',
+          'file:///main.js',
+          monaco
+        );
+        instance = monaco.editor.create(editorRefs[tab], {
+          model: mainModel,
+          ...config
+        });
+      } else {
+        instance = monaco.editor.create(editorRefs[tab], {
+          value: code.value[tab],
+          language: langMap[tab],
+          ...config
+        })
+      }
+      instance.onDidChangeModelContent(() => {
+        code.value[tab] = instance.getValue()
+        scheduleUpdate()
+      })
+      editorInstances[tab] = instance
+    })
+    isLoaded.value = true;
+  })
+  onBeforeUnmount(() => {
+    Object.values(editorInstances).forEach(e => e.dispose())
+    Object.values(models).forEach(e => e.dispose())
+    if (updateTimer) clearTimeout(updateTimer)
+  })
+  return { tabs, activeTab, setEditorRef, isLoaded }
+}

package/docs/.vitepress/components/Playground/Playground.vue ADDED Viewed

@@ -0,0 +1,206 @@
+<template>
+  <div class="playground" :class="{ loaded: isLoaded === true }">
+    <div class="editor-pane">
+      <div class="tabs">
+        <button
+          v-for="tab in tabs"
+          :key="tab"
+          class="tab"
+          :class="{ active: activeTab === tab }"
+          @click="activeTab = tab"
+        >
+          {{ tab }}
+        </button>
+      </div>
+      <div class="editor-container">
+        <div
+          v-for="tab in tabs"
+          :key="tab"
+          :ref="el => setEditorRef(tab, el)"
+          class="editor-mount"
+          :style="{ visibility: activeTab === tab ? 'visible' : 'hidden' }"
+        />
+        <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>
+      </div>
+    </div>
+    <div class="preview-pane">
+      <iframe ref="previewFrame" class="preview-frame" sandbox="allow-scripts" />
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+import { playground } from './Playground.js'
+import { getDefaultExample } from './defaultExample.js';
+//import * as libCode from './libCode.js';
+import { interFontDec } from './interFont.js';
+const props = defineProps({
+  //initialHtml: { type: String, default: defaultExample.html },
+  //initialCss:  { type: String, default: defaultExample.css },
+  //initialJs:   { type: String, default: defaultExample.js },
+  //decLibSrc:   { type: String, default: libCode.decLibSrc },
+  //libImportMap:   { type: String, default: libCode.libImportMap }
+})
+const previewFrame = ref(null)
+const { tabs, activeTab, isLoaded, setEditorRef } = playground(props, previewFrame, getDefaultExample, interFontDec)
+</script>
+<style scoped>
+.playground {
+  display: flex;
+  height: 500px;
+  --border-radius: 8px;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  margin-bottom: 48px;
+}
+@media (max-width: 1000px) {
+  .playground {
+    flex-flow: column-reverse;
+  }
+  .playground .preview-pane {
+    border-bottom-width: 0;
+    border-left-width: 1px;
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+  }
+}
+@media (max-width: 640px) {
+  .playground {
+    margin-left: -24px;
+    margin-right: -24px;
+    --border-radius: 0;
+  }
+  .playground .preview-pane {
+    border-right-width: 0;
+    border-left-width: 0;
+  }
+}
+@media (min-width: 640px) {
+  .playground {
+    margin-bottom: 64px;
+  }
+}
+.editor-pane {
+  display: flex;
+  flex-direction: column;
+  background: var(--vp-code-block-bg);
+  flex: 1;
+}
+.tabs {
+  display: flex;
+  flex-shrink: 0;
+  padding: 0 12px;
+  background-color: var(--vp-code-tab-bg);
+  box-shadow: inset 0 -1px var(--vp-code-tab-divider);
+}
+.tab {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px solid transparent;
+  padding: 0 12px;
+  line-height: 48px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-code-tab-text-color);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color 0.25s;
+}
+.tab:hover {
+  color: var(--vp-code-tab-hover-text-color);
+}
+.tab.active {
+  color: var(--vp-code-tab-active-text-color);
+}
+.tab::after {
+  position: absolute;
+  right: 8px;
+  bottom: -1px;
+  left: 8px;
+  z-index: 1;
+  height: 2px;
+  border-radius: 2px;
+  content: '';
+  background-color: transparent;
+  /* transition: background-color 0.25s; */
+}
+.tab.active::after {
+  background-color: var(--vp-code-tab-active-bar-color);
+}
+.editor-container {
+  flex: 1;
+  /* overflow: hidden; */
+  position: relative;
+}
+.editor-mount {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.editor-container .loader {
+  translate: -50% -50%;
+  left: 50%;
+  top: 50%;
+  position: relative;
+  color: var(--vp-c-text-2);
+  pointer-events: none;
+  animation: spin8 0.8s steps(8) infinite;
+  transition: .18s ease-in-out .18s opacity;
+  @starting-style {
+    opacity: 0;
+  }
+}
+.editor-container .loader rect {
+  fill: currentColor;
+}
+.playground.loaded .loader {
+  display: none;
+}
+@keyframes spin8 {
+  from {
+    transform: rotate(180deg);
+  }
+  to {
+    transform: rotate(540deg);
+  }
+}
+.preview-pane {
+  border: 1px solid var(--vp-code-block-bg);
+  border-left-width: 0;
+  flex: 1;
+  display: flex;
+  border-radius: 0 var(--border-radius) var(--border-radius) 0;
+  overflow: hidden;
+  background: #f0f7ff;
+}
+.preview-frame {
+  flex: 1;
+  width: 100%;
+  border: none;
+}
+</style>

package/docs/.vitepress/components/Playground/defaultExample.js ADDED Viewed

@@ -0,0 +1,175 @@
+// const isTouchDevice = window.matchMedia('(hover: none)').matches;
+export function getDefaultExample({ isTouchDevice }) {
+const jsAnimActivateEvent = isTouchDevice ? 'touchstart' : 'mouseenter';
+const jsAnimDeactivateEvent = isTouchDevice ? 'touchend' : 'mouseleave';
+const js = `import KeyframeKit from 'keyframekit';
+const documentStyleSheets = await KeyframeKit.getDocumentStyleSheetsOnLoad();
+// get animation keyframes from stylesheet
+const rotateAnimKeyframes = KeyframeKit.getStyleSheetKeyframes({
+  of: 'rotate',
+  in: documentStyleSheets
+});
+// then, define your animation
+const rotateAnim = rotateAnimKeyframes.toKeyframeEffect({
+  duration: 700,
+  easing: 'ease'
+});
+// finally, attach it to your elements:
+let attachedAnims = [];
+let animDelay = 0;
+const spans = document.querySelectorAll('.text-anim span');
+for (const span of spans) {
+  const attachedAnim = rotateAnim.toAnimation({
+    target: span,
+    options: {
+      delay: animDelay * 1000,
+      endDelay: -animDelay * 1000
+    }
+  });
+  attachedAnims.push(attachedAnim);
+  animDelay += .02;
+}
+attachedAnims.forEach(anim => anim.play());
+// the primary reason to play your animation with JS
+// is because you get way more control over its playback:
+const textAnimEl = document.querySelector('.text-anim');
+textAnimEl.addEventListener('${jsAnimActivateEvent}', () => {
+  attachedAnims.forEach(anim => {
+    anim.playbackRate = 1;
+    anim.play();
+  });
+  updateProgressBar();
+});
+textAnimEl.addEventListener('${jsAnimDeactivateEvent}', () => {
+  // reverse the animation
+  attachedAnims.forEach(anim => {
+    anim.playbackRate = -1;
+  });
+  updateProgressBar();
+});
+const progressBar = document.querySelector('.progress-bar');
+function updateProgressBar() {
+  let progress = 0;
+  for (const anim of attachedAnims) {
+    progress += anim.overallProgress;
+  }
+  progress = progress / attachedAnims.length * 100;
+  progressBar.style.setProperty(
+    '--progress', progress + '%'
+  );
+  const isPlaying = attachedAnims.some(anim =>
+    anim.playState === 'running'
+  );
+  if (!isPlaying) return;
+  requestAnimationFrame(updateProgressBar);
+}`;
+const css = `@keyframes rotate {
+  from {
+    clip-path: inset(0 0 0 0);
+    translate: 0 0;
+  }
+  49.99% {
+    clip-path: inset(100% 0 0 0);
+    translate: 0 -50px;
+  }
+  50% {
+    clip-path: inset(0 0 100% 0);
+    translate: 0 50px;
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+    translate: 0 0;
+  }
+}
+.text-anim {
+  display: flex;
+  font-size: 85px;
+  font-weight: 600;
+  color: #7ab6ff;
+  cursor: pointer;
+}
+.progress-bar {
+  width: ${isTouchDevice ? '180px' : '232px'};
+  height: 3px;
+  border-radius: 3px;
+  background: #82868942;
+  position: relative;
+}
+.progress-bar::before {
+  content: '';
+  height: 100%;
+  width: var(--progress, 0%);
+  border-radius: inherit;
+  position: absolute;
+  background: #7ab6ff;
+}
+body {
+  font-family: 'Inter', system-ui;
+  background: #f0f7ff;
+  height: 100vh;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-flow: column;
+  user-select: none;
+  -webkit-user-select: none;
+}`;
+const htmlDesktop = `<div class="text-anim">
+  <span>H</span>
+  <span>o</span>
+  <span>v</span>
+  <span>e</span>
+  <span>r</span>
+</div>
+<div class="progress-bar"></div>`;
+const htmlMobile = `<div class="text-anim">
+  <span>H</span>
+  <span>o</span>
+  <span>l</span>
+  <span>d</span>
+</div>
+<div class="progress-bar"></div>`;
+const html = isTouchDevice ? htmlMobile : htmlDesktop;
+return { JS: js, CSS: css, HTML: html };
+}