keyframekit 1.2.0 → 1.2.1

package/dist/KeyframeKit.min.js

@@ -3,3 +3,4 @@
  * MIT License
  */
 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};
+//# sourceMappingURL=KeyframeKit.min.js.map

package/dist/KeyframeKit.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyframeKit.min.js","sources":["../src/KeyframeKit.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAQA"}

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "keyframekit",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Unlock fine-grained control over your CSS animations with JavaScript.",
   "main": "./dist/KeyframeKit.js",
   "scripts": {
     "build": "tsc && rollup -c",
-    "docs:bump": "(cd docs && npm run bump)",
-    "docs:build": "(cd docs && npm run build)"
+    "docs:bump": "(cd docs && npm run bump)"
   },
+  "files": [
+    "src",
+    "dist"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/benhatsor/KeyframeKit.git"

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

@@ -1,243 +0,0 @@
-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

@@ -1,208 +0,0 @@
-<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

@@ -1,175 +0,0 @@
-
-// 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 the document's stylesheets
-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 };
-
-}