feat!: simplify runtime to single folder

This commit adds a massive change to the runtime.
- Instead of separating composables and their component counterparts to separate folders, keep them in the same folder naming it component.vue
- Have a more consistent naming scheme for components.

playground/app.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { vSplitAnimate } from "../src/runtime/composables/directives";
+import { vSplitAnimate } from "../src/functions/directives";
 import { ref, useBakedTransition } from "#imports";
 import { promiseTimeout } from "@vueuse/core";
 
@@ -23,7 +23,7 @@ const onAfterEnter = async () => {
 };
 </script>
 <template>
- <smooth-scroll>
+ <locomotive>
  <button
  class="bg-yellow-500 rounded-md grid place-content-center relative px-8 py-5 overflow-hidden"
  @mouseover="
@@ -71,7 +71,7 @@ const onAfterEnter = async () => {
  &gt;
  </button>
  </div>
- <transition-offset
+ <transitions-offset
  class="red h-full w-full"
  :run="runTransition"
  :direction="direction"
@@ -132,7 +132,7 @@ const onAfterEnter = async () => {
  </div>
  </infinite-marquee>
  </div>
- </smooth-scroll>
+ </locomotive>
 </template>
 
 <style>

src/.vitepress/config.ts

@@ -4,11 +4,16 @@ import { ogUrl, github, ogImage, releases, logo } from "./meta";
 import { version, name, description } from "../../package.json";
 import { titleCase, camelCase } from "string-ts";
 
-const refPaths = generateSidebar("src/runtime", {
- leadingPath: "/ref",
- leafFile: "README",
- transformName: camelCase,
-});
+const refPaths = [
+ generateSidebar("src", {
+ leadingPath: "/ref",
+ leafFile: "README",
+ transformName: camelCase,
+ transformPath: (path) => path.replace("functions", ""),
+ }).find((item) => item.text === "functions")!,
+];
+
+refPaths[0].text = "Reference";
 
 const guidePaths = generateSidebar("src/guide", {
  leadingPath: "/guide",
@@ -48,8 +53,8 @@ export default defineConfig({
  ],
 
  rewrites: {
- "runtime/:type+/README.md": "ref/:type+/index.md",
- "runtime/:type+.md": "ref/:type+.md",
+ "functions/:type*/README.md": "ref/:type*/index.md",
+ "functions/:type+.md": "ref/:type+.md",
  },
  sitemap: {
  hostname: "https://nugget.stevenjohn.co",
@@ -83,12 +88,13 @@ export default defineConfig({
  {
  text: "Reference",
  // @ts-expect-error
- items: generateSidebar("src/runtime", {
+ items: generateSidebar("src", {
  leadingPath: "/ref",
  leafFile: "README",
- depth: 2,
- transformName: titleCase,
- }),
+ depth: 3,
+ transformName: camelCase,
+ transformPath: (path) => path.replace("functions", ""),
+ }).find((item) => item.text === "functions").items!,
  },
  {
  text: `v${version}`,
@@ -98,7 +104,7 @@ export default defineConfig({
 
  sidebar: {
  "/guide/": guidePaths,
- "/ref/": [{ text: "Reference", items: refPaths }],
+ "/ref/": refPaths,
  },
 
  socialLinks: [{ icon: "github", link: github }],

src/runtime/plugin.ts → src/functions/plugin.ts

@@ -1,9 +1,5 @@
 import { defineNuxtPlugin } from "#app";
-import {
- vSplitAnimate,
- vAos,
- vFromTo,
-} from "../runtime/composables/directives";
+import { vSplitAnimate, vAos, vFromTo } from "./directives";
 
 export default defineNuxtPlugin((nuxt) => {
  nuxt.vueApp.directive("split-animate", vSplitAnimate);

src/runtime/components/transition/BendyWendy.vue → src/functions/transitions/bendy-wendy/component.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref, toRefs, useBendyWendyTransition, watch } from "#imports";
-import type { TransitionProps, TransitionEmits } from "./utils";
-import { callbackFactory } from "./utils";
+import type { TransitionProps, TransitionEmits } from "../utils";
+import { callbackFactory } from "../utils";
 
 const props = withDefaults(defineProps<TransitionProps>(), {
  direction: "top",

src/runtime/composables/transitions/bendy-wendy.ts → src/functions/transitions/bendy-wendy/index.ts

@@ -4,7 +4,7 @@ import {
  useConstructTransition,
  type TransitionOutput,
  type UseConstructTransitionOptions,
-} from "./construct";
+} from "../construct";
 import type { Simplify } from "../../types";
 
 export type BendyWendyOptions = Simplify<

src/runtime/components/transition/Offset.vue → src/functions/transitions/offset/component.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { ref, toRefs, useOffsetTransition, watch } from "#imports";
 import type { HTMLAttributes } from "vue";
-import type { TransitionEmits } from "./utils";
-import { callbackFactory } from "./utils";
+import { type TransitionEmits, callbackFactory } from "../utils";
 import type { Direction } from "../../types";
 
 const parentContainer = ref<HTMLElement | null>(null);
@@ -36,13 +35,7 @@ watch(run, (value) => {
 
 <template>
  <div ref="parentContainer">
- <div
- ref="mainContainer"
- v-bind="props.mainContainerAttributes"
- />
- <div
- ref="offsetContainer"
- v-bind="props.offsetContainerAttributes"
- />
+ <div ref="mainContainer" v-bind="props.mainContainerAttributes" />
+ <div ref="offsetContainer" v-bind="props.offsetContainerAttributes" />
  </div>
 </template>

src/runtime/composables/transitions/offset.ts → src/functions/transitions/offset/index.ts

@@ -4,7 +4,7 @@ import {
  useConstructTransition,
  type TransitionOutput,
  type UseConstructTransitionOptions,
-} from "./construct";
+} from "../construct";
 import { watch, unrefElement, unref, type MaybeRef } from "#imports";
 
 export type OffsetOptions = Simplify<

src/runtime/components/transition/utils.ts → src/functions/transitions/utils.ts

@@ -1,5 +1,5 @@
-import type { Direction } from "../../types";
-import { type UseConstructTransitionCallbackOptions } from "../../composables/transitions/transition";
+import type { Direction } from "../types";
+import type { UseConstructTransitionCallbackOptions } from "./construct";
 
 export type TransitionProps = {
  run: boolean;
@@ -15,7 +15,7 @@ export type TransitionEmits = {
 };
 
 export const callbackFactory = (
- emit: (evt: any) => any,
+ emit: (evt: any) => void,
 ): UseConstructTransitionCallbackOptions => ({
  onEnter() {
  emit("enter");

src/functions/use-infinite-marquee/component.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import {
+ computed,
+ ref,
+ tryOnMounted,
+ useElementSize,
+ useElementVisibility,
+ useRafFn,
+ useWindowScroll,
+ useWindowSize,
+ watch,
+ watchEffect,
+} from "#imports";
+
+// Most of this credit goes to:
+// https://stackoverflow.com/questions/71165923/how-do-i-make-an-infinite-marquee-with-js#answer-71167758
+
+const loopContainerParent = ref<HTMLElement | null>(null);
+const loopContainer = ref<HTMLElement | null>(null);
+
+const props = withDefaults(
+ defineProps<{
+ /** The speed of the marquee
+ * @default 0.05
+ */
+ speed?: number;
+ /** The gap between the repeated elements
+ * @default "0rem"
+ */
+ gap?: string;
+ /** The direction of the marquee
+ * @default "right"
+ */
+ direction?: "left" | "right";
+ /** Whether the marquee should pause on hover
+ * @default undefined
+ */
+ pauseOnHover?: boolean;
+ /** The acceleration of the marquee
+ * @default 0.05
+ */
+ acceleration?: number;
+ }>(),
+ { speed: 0.05, gap: "0rem", direction: "right", acceleration: 0.05 },
+);
+
+const isHovering = ref(false);
+const lerpVals = ref({ current: 0, target: 0 });
+const interpolationFactor = 0.1;
+const directionConstant: -1 | 1 = props.direction === "left" ? -1 : 1;
+const leftPercent = `calc(${directionConstant * -100}% - ${props.gap})`;
+const isTargetVisible = useElementVisibility(loopContainerParent);
+const { width: containerWidth } = useElementSize(loopContainer);
+
+const x = ref(0);
+
+const { width: windowWidth } = useWindowSize();
+const { y: windowY } = useWindowScroll();
+
+const lerp = (lerpVals: { current: number; target: number }) =>
+ lerpVals.current * (1 - interpolationFactor) +
+ lerpVals.target * interpolationFactor;
+
+const target = computed(
+ () =>
+ ((containerWidth.value - windowWidth.value) / containerWidth.value) * 100,
+);
+
+const {
+ pause: pauseRaf,
+ resume: resumeRaf,
+ isActive: isRafActive,
+} = useRafFn(
+ () => {
+ const lerpValsConstant = lerpVals.value;
+ lerpValsConstant.target += props.speed;
+ lerpValsConstant.current = lerp(lerpValsConstant);
+
+ if (lerpValsConstant.target > target.value) {
+ lerpValsConstant.current -= lerpValsConstant.target;
+ lerpValsConstant.target = 0;
+ }
+
+ x.value = lerpValsConstant.current * directionConstant;
+ },
+ { immediate: false },
+);
+
+tryOnMounted(() => {
+ loopContainerParent.value?.children[0].children[1]?.classList.add("repeated");
+});
+
+watch(windowY, () => {
+ lerpVals.value.target += props.acceleration * 5;
+});
+
+watchEffect(() => {
+ if ((!isTargetVisible.value || isHovering.value) && isRafActive.value) {
+ pauseRaf();
+ } else {
+ resumeRaf();
+ }
+});
+</script>
+
+<template>
+ <div
+ ref="loopContainerParent"
+ :style="{
+ overflow: 'hidden',
+ }"
+ @mouseover="if (props.pauseOnHover) isHovering = true;"
+ @mouseleave="if (props.pauseOnHover) isHovering = false;"
+ >
+ <div
+ ref="loopContainer"
+ :style="{
+ transform: `translateX(${x}%)`,
+ }"
+ class="loop-container"
+ >
+ <slot key="1" />
+ <slot key="2" />
+ </div>
+ </div>
+</template>
+
+<style scoped>
+.loop-container {
+ display: inline-flex;
+ position: relative;
+ white-space: nowrap;
+}
+
+:deep(.repeated) {
+ position: absolute;
+ left: v-bind(leftPercent);
+}
+</style>

src/runtime/components/SmoothScroll.vue → src/functions/use-locomotive/component.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref } from "#imports";
-import { useLocomotive } from "../composables";
+import { useLocomotive } from ".";
 import type { ILocomotiveScrollOptions } from "locomotive-scroll/dist/types/types";
 
 const props = defineProps<{

src/module.ts

@@ -3,10 +3,13 @@ import {
  addPlugin,
  createResolver,
  installModule,
- addComponentsDir,
  addImportsDir,
+ addComponent,
 } from "@nuxt/kit";
 import { name, version } from "../package.json";
+import fg from "fast-glob";
+import { relative } from "pathe";
+import { pascalCase } from "string-ts";
 
 // Module options TypeScript interface definition
 export interface ModuleOptions {}
@@ -22,11 +25,22 @@ export default defineNuxtModule<ModuleOptions>({
  async setup() {
  const resolver = createResolver(import.meta.url);
 
- // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
- addPlugin(resolver.resolve("./runtime/plugin"));
+ addPlugin(resolver.resolve("./functions/plugin"));
 
- addComponentsDir({ path: resolver.resolve("./runtime/components") });
- addImportsDir(resolver.resolve("./runtime/composables"));
+ for (const path of fg.sync(
+ resolver.resolve("./functions/**/component.vue"),
+ )) {
+ addComponent({
+ name: pascalCase(
+ relative(resolver.resolve("./functions"), path)
+ .replace("component.vue", "")
+ .replace("use", ""),
+ ),
+ filePath: path,
+ });
+ }
+
+ addImportsDir(resolver.resolve("./functions"));
 
  await installModule("nuxt-split-type", {});
  await installModule("@vueuse/nuxt", {});