diff --git a/build/bundle.ts b/build/bundle.ts index 9ebff09f..16b5afe6 100644 --- a/build/bundle.ts +++ b/build/bundle.ts @@ -208,6 +208,22 @@ async function bundleDeclarations() { await execa("shx", ["rm", `${rootDir}/dist/index.js`]) } +async function markoBuild() { + info("Copying Marko tag") + await execa("shx", ["mkdir", "-p", `${rootDir}/dist/tags`]) + await execa("shx", [ + "cp", + `${rootDir}/src/marko/auto-animate.marko`, + `${rootDir}/dist/tags/auto-animate.marko`, + ]) + // The taglib manifest (marko.json) is a committed static file, copied to dist + // by addAssets() alongside README/LICENSE β€” see there. The tag's `../index` + // import is left extensionless on purpose: it is NOT compiled by rollup (the + // consumer's @marko/vite compiles it), and Vite resolves the extension to + // `index.mjs` in dist and to `index.ts` against source in a dev harness β€” so + // no `.mjs` fixup is needed here, unlike the JS-framework builds. +} + async function addPackageJSON() { info("Writing package.json") const raw = await readFile(resolve(rootDir, "package.json"), "utf8") @@ -222,13 +238,21 @@ async function addPackageJSON() { } async function addAssets() { - info("Writing readme and license.") + info("Writing readme, license, and marko manifest.") await execa("shx", [ "cp", `${rootDir}/README.md`, `${rootDir}/dist/README.md`, ]) await execa("shx", ["cp", `${rootDir}/LICENSE`, `${rootDir}/dist/LICENSE`]) + // marko.json is a committed, static taglib manifest β€” copied verbatim like + // README/LICENSE, never generated. Its "exports" path is authored relative to + // the published package root (dist), so "./tags" resolves to dist/tags. + await execa("shx", [ + "cp", + `${rootDir}/marko.json`, + `${rootDir}/dist/marko.json`, + ]) } async function prepareForPublishing() { @@ -291,6 +315,7 @@ async function main() { if (!process.env.NO_NUXT) { await nuxtBuild() } + await markoBuild() await addPackageJSON() await addAssets() await outputSize() diff --git a/docs/src/components/CodeExample.vue b/docs/src/components/CodeExample.vue index fae80f28..2295cb5f 100644 --- a/docs/src/components/CodeExample.vue +++ b/docs/src/components/CodeExample.vue @@ -11,6 +11,7 @@ import IconPNPM from "./IconPNPM.vue" import IconJavaScript from "./IconJavaScript.vue" import IconSvelte from "./IconSvelte.vue" import IconAngular from "./IconAngular.vue" +import IconMarko from "./IconMarko.vue" import IconNuxt from "./IconNuxt.vue" import IconBun from "./IconBun.vue" import { computed, ref } from "vue" @@ -25,6 +26,7 @@ type LanguageOption = | "solid" | "svelte" | "angular" + | "marko" | "qwik" | "js" | "yarn" @@ -34,7 +36,7 @@ type LanguageOption = | "bun" type Language = { - ext: "jsx" | "vue" | "html" + ext: "jsx" | "vue" | "html" | "marko" example: string title?: string language: string @@ -154,6 +156,13 @@ function copyCode(value: string) { > Angular +
  • + Marko +
  • +// Official multi-color Marko logomark. It uses internal id references (clipPath + +// ) to draw the darker two-tone overlays; because this icon renders multiple +// times on a page (every code-window framework switcher plus the jump-link), the +// ids are made unique per instance via useId() so there are no duplicate-id +// collisions. useId() is SSR-stable, which the vite-ssg docs build needs. +import { useId } from "vue" +const uid = useId() + + + \ No newline at end of file diff --git a/docs/src/components/Navigation.vue b/docs/src/components/Navigation.vue index db8f671d..b6b435f3 100644 --- a/docs/src/components/Navigation.vue +++ b/docs/src/components/Navigation.vue @@ -44,6 +44,7 @@ if (typeof window !== "undefined") {
  • Solid
  • Svelte
  • Angular
    • +
  • Marko
  • Disable
  • Examples
    • diff --git a/docs/src/examples/disable/disable.marko b/docs/src/examples/disable/disable.marko new file mode 100644 index 00000000..9c1e51a9 --- /dev/null +++ b/docs/src/examples/disable/disable.marko @@ -0,0 +1,23 @@ +import AutoAnimate from "@formkit/auto-animate/marko" + + + + + + +
      + color)> +
    • ${color}
      • + +
    + + + diff --git a/docs/src/examples/disable/index.ts b/docs/src/examples/disable/index.ts index ac7ac922..b9a12c6a 100644 --- a/docs/src/examples/disable/index.ts +++ b/docs/src/examples/disable/index.ts @@ -1,5 +1,6 @@ import vueExample from "./disable.vue?raw" import reactExample from "./disable.jsx?raw" +import markoExample from "./disable.marko?raw" // import htmlExample from "./disable.html?raw" export default { @@ -13,6 +14,11 @@ export default { language: "html", example: vueExample, }, + marko: { + ext: "marko", + language: "html", + example: markoExample, + }, // js: { // example: htmlExample, // ext: "html", diff --git a/docs/src/examples/dropdown/dropdown.marko b/docs/src/examples/dropdown/dropdown.marko new file mode 100644 index 00000000..ee963faa --- /dev/null +++ b/docs/src/examples/dropdown/dropdown.marko @@ -0,0 +1,13 @@ +import AutoAnimate from "@formkit/auto-animate/marko" + + + +
    + + Click me to open! + + +

    Lorum ipsum...

    + +
    + diff --git a/docs/src/examples/dropdown/index.ts b/docs/src/examples/dropdown/index.ts index 1f849054..e3dad920 100644 --- a/docs/src/examples/dropdown/index.ts +++ b/docs/src/examples/dropdown/index.ts @@ -2,6 +2,7 @@ import vueExample from "./dropdown.vue?raw" import reactExample from "./dropdown.jsx?raw" import solidExample from "./dropdown-solid.tsx?raw" import nativeExample from "./dropdown.html?raw" +import markoExample from "./dropdown.marko?raw" export default { react: { language: "jsx", @@ -18,6 +19,11 @@ export default { ext: "vue", example: vueExample, }, + marko: { + language: "html", + ext: "marko", + example: markoExample, + }, js: { language: "html", ext: "html", diff --git a/docs/src/examples/intro/index.ts b/docs/src/examples/intro/index.ts index 87e92dd2..b68239f6 100644 --- a/docs/src/examples/intro/index.ts +++ b/docs/src/examples/intro/index.ts @@ -5,6 +5,7 @@ import solidExample from "./intro-solid.jsx?raw" import htmlExample from "./intro.html?raw" import svelteExample from "./intro.svelte?raw" import angularExample from "./intro.angular?raw" +import markoExample from "./intro.marko?raw" export default { react: { @@ -37,6 +38,11 @@ export default { ext: "angular", language: "html", }, + marko: { + example: markoExample, + ext: "marko", + language: "html", + }, js: { example: htmlExample, ext: "html", diff --git a/docs/src/examples/intro/intro.marko b/docs/src/examples/intro/intro.marko new file mode 100644 index 00000000..250e922e --- /dev/null +++ b/docs/src/examples/intro/intro.marko @@ -0,0 +1,6 @@ +import AutoAnimate from "@formkit/auto-animate/marko" + +
      + +
    + diff --git a/docs/src/examples/marko/ActualMarkoApp.vue b/docs/src/examples/marko/ActualMarkoApp.vue new file mode 100644 index 00000000..dc54d457 --- /dev/null +++ b/docs/src/examples/marko/ActualMarkoApp.vue @@ -0,0 +1,33 @@ + + + + + \ No newline at end of file diff --git a/docs/src/examples/marko/index.ts b/docs/src/examples/marko/index.ts new file mode 100644 index 00000000..8486d093 --- /dev/null +++ b/docs/src/examples/marko/index.ts @@ -0,0 +1,20 @@ +export default { + marko: { + language: "html", + ext: "marko", + example: `import AutoAnimate from "@formkit/auto-animate/marko" + + + + +
      + String(n))> +
    • \${item}
      • + +
    + + + +`, + }, +} \ No newline at end of file diff --git a/docs/src/sections/SectionUsage.vue b/docs/src/sections/SectionUsage.vue index b5cc4c3e..a3d81bef 100644 --- a/docs/src/sections/SectionUsage.vue +++ b/docs/src/sections/SectionUsage.vue @@ -18,6 +18,8 @@ import ActualPreactApp from "../examples/preact/ActualPreactApp.vue" import ActualSolidApp from "../examples/solid/ActualSolidApp.vue" import ActualDropdown from "../examples/dropdown/ActualDropdown.vue" import svelteAction from "../examples/svelte" +import markoTag from "../examples/marko" +import ActualMarkoApp from "../examples/marko/ActualMarkoApp.vue" import qwikHook from "../examples/qwik" import ActualSvelteApp from "../examples/svelte/ActualSvelteApp.vue" import ActualVueApp from "../examples/vue/ActualVueApp.vue" @@ -30,6 +32,7 @@ import IconVue from "../components/IconVue.vue" import IconAngular from "../components/IconAngular.vue" import IconSvelte from "../components/IconSvelte.vue" import IconSolid from "../components/IconSolid.vue" +import IconMarko from "../components/IconMarko.vue" import IconQwik from "../components/IconQwik.vue"