rename dom package

src/packages/dom/van.test.ts → src/packages/dom/index.test.ts

@@ -1,4 +1,4 @@
-import van, { State } from "./van";
+import van, { State } from ".";
 
 const {
   a,

src/packages/hint/components/HintIcon.ts

@@ -1,5 +1,5 @@
 import isFixed from "../../../util/isFixed";
-import van, { State } from "../../dom/van";
+import dom, { State } from "../../dom";
 import {
   fixedHintClassName,
   hideHintClassName,
@@ -12,7 +12,7 @@ import { HintItem, HintPosition } from "../hintItem";
 import { dataStepAttribute } from "../dataAttributes";
 import { alignHintPosition } from "../position";
 
-const { a, div } = van.tags;
+const { a, div } = dom.tags;
 
 export type HintProps = {
   index: number;
@@ -60,7 +60,7 @@ export const HintIcon = ({
     HintPulse()
   );
 
-  van.derive(() => {
+  dom.derive(() => {
     if (refreshesSignal.val === undefined) return;
 
     alignHintPosition(

src/packages/hint/components/HintTooltip.ts

@@ -1,9 +1,9 @@
 import { Tooltip, TooltipProps } from "../../tooltip/tooltip";
-import van from "../../dom/van";
+import dom from "../../dom";
 import { tooltipTextClassName } from "../className";
 import { HintItem } from "../hintItem";
 
-const { a, p, div } = van.tags;
+const { a, p, div } = dom.tags;
 
 export type HintTooltipProps = Omit<
   TooltipProps,

src/packages/hint/components/HintsRoot.ts

@@ -1,12 +1,12 @@
-import van from "../../dom/van";
+import dom from "../../dom";
 import { hintsClassName } from "../className";
 import { hideHint } from "../hide";
 import { Hint } from "../hint";
 import { HintItem } from "../hintItem";
 import { HintIcon } from "./HintIcon";
 import { ReferenceLayer } from "./ReferenceLayer";
 
-const { div } = van.tags;
+const { div } = dom.tags;
 
 export type HintsRootProps = {
   hint: Hint;
@@ -54,7 +54,7 @@ export const HintsRoot = ({ hint }: HintsRootProps) => {
     ...hintElements
   );
 
-  van.derive(() => {
+  dom.derive(() => {
     const activeHintSignal = hint.getActiveHintSignal();
     if (activeHintSignal.val === undefined) return;
 
@@ -85,7 +85,7 @@ export const HintsRoot = ({ hint }: HintsRootProps) => {
       closeButtonOnClick: (hintItem: HintItem) => hideHint(hint, hintItem),
     });
 
-    van.add(root, referenceLayer);
+    dom.add(root, referenceLayer);
   });
 
   return root;

src/packages/hint/components/ReferenceLayer.ts

@@ -1,13 +1,13 @@
 import { setPositionRelativeTo } from "../../../util/positionRelativeTo";
-import van, { State } from "../../dom/van";
+import dom, { State } from "../../dom";
 import {
   hintReferenceClassName,
   tooltipReferenceLayerClassName,
 } from "../className";
 import { dataStepAttribute } from "../dataAttributes";
 import { HintTooltip, HintTooltipProps } from "./HintTooltip";
 
-const { div } = van.tags;
+const { div } = dom.tags;
 
 export type ReferenceLayerProps = HintTooltipProps & {
   activeHintSignal: State<number | undefined>;

src/packages/hint/hint.ts

@@ -8,7 +8,7 @@ import DOMEvent from "../../util/DOMEvent";
 import { getContainerElement } from "../../util/containerElement";
 import { hideHint, hideHints } from "./hide";
 import { showHint, showHints } from "./show";
-import van from "../dom/van";
+import dom from "../dom";
 import { HintsRoot } from "./components/HintsRoot";
 
 type hintsAddedCallback = (this: Hint) => void | Promise<void>;
@@ -20,8 +20,8 @@ export class Hint implements Package<HintOptions> {
   private _hints: HintItem[] = [];
   private readonly _targetElement: HTMLElement;
   private _options: HintOptions;
-  private _activeHintSignal = van.state<number | undefined>(undefined);
-  private _refreshesSignal = van.state(0);
+  private _activeHintSignal = dom.state<number | undefined>(undefined);
+  private _refreshesSignal = dom.state(0);
 
   private readonly callbacks: {
     hintsAdded?: hintsAddedCallback;
@@ -100,7 +100,7 @@ export class Hint implements Package<HintOptions> {
    */
   addHint(hint: HintItem): this {
     // always set isActive to true
-    hint.isActive = van.state(true);
+    hint.isActive = dom.state(true);
     this._hints.push(hint);
     return this;
   }
@@ -130,7 +130,7 @@ export class Hint implements Package<HintOptions> {
 
   private createRoot() {
     this._root = HintsRoot({ hint: this });
-    van.add(this._targetElement, this._root);
+    dom.add(this._targetElement, this._root);
   }
 
   private recreateRoot() {

src/packages/hint/hintItem.ts

@@ -7,7 +7,7 @@ import {
   dataHintPositionAttribute,
   dataTooltipClassAttribute,
 } from "./dataAttributes";
-import { State } from "../dom/van";
+import { State } from "../dom";
 
 export type HintPosition =
   | "top-left"

src/packages/tooltip/tooltip.ts

@@ -1,16 +1,16 @@
 import getOffset, { Offset } from "../../util/getOffset";
 import getWindowSize from "../../util/getWindowSize";
-import van, { ChildDom, State } from "../dom/van";
+import dom, { ChildDom, State } from "../dom";
 import { arrowClassName, tooltipClassName } from "../tour/classNames";
 import { determineAutoPosition, TooltipPosition } from "./tooltipPosition";
 
-const { div } = van.tags;
+const { div } = dom.tags;
 
 export const TooltipArrow = (props: {
   tooltipPosition: State<TooltipPosition>;
   tooltipBottomOverflow: State<boolean>;
 }) => {
-  const classNames = van.derive(() => {
+  const classNames = dom.derive(() => {
     const classNames = [arrowClassName];
 
     switch (props.tooltipPosition.val) {
@@ -336,28 +336,28 @@ export const Tooltip = (
   }: TooltipProps,
   children?: ChildDom[]
 ) => {
-  const top = van.state<string>("auto");
-  const right = van.state<string>("auto");
-  const bottom = van.state<string>("auto");
-  const left = van.state<string>("auto");
-  const marginLeft = van.state<string>("auto");
-  const marginTop = van.state<string>("auto");
-  const opacity = van.state<number>(0);
+  const top = dom.state<string>("auto");
+  const right = dom.state<string>("auto");
+  const bottom = dom.state<string>("auto");
+  const left = dom.state<string>("auto");
+  const marginLeft = dom.state<string>("auto");
+  const marginTop = dom.state<string>("auto");
+  const opacity = dom.state<number>(0);
   // setting a default height for the tooltip instead of 0 to avoid flickering
   // this default is coming from the CSS class and is overridden after the tooltip is rendered
-  const tooltipHeight = van.state<number>(250);
+  const tooltipHeight = dom.state<number>(250);
   // max width of the tooltip according to its CSS class
   // this default is coming from the CSS class and is overridden after the tooltip is rendered
-  const tooltipWidth = van.state<number>(300);
-  const position = van.state<TooltipPosition>(initialPosition);
+  const tooltipWidth = dom.state<number>(300);
+  const position = dom.state<TooltipPosition>(initialPosition);
   // windowSize can change if the window is resized
-  const windowSize = van.state(getWindowSize());
-  const targetOffset = van.state<Offset>(getOffset(element));
-  const tooltipBottomOverflow = van.derive(
+  const windowSize = dom.state(getWindowSize());
+  const targetOffset = dom.state<Offset>(getOffset(element));
+  const tooltipBottomOverflow = dom.derive(
     () => targetOffset.val!.top + tooltipHeight.val! > windowSize.val!.height
   );
 
-  van.derive(() => {
+  dom.derive(() => {
     // set the new windowSize and targetOffset if the refreshes signal changes
     if (refreshes.val !== undefined) {
       windowSize.val = getWindowSize();
@@ -366,7 +366,7 @@ export const Tooltip = (
   });
 
   // auto-align tooltip based on position precedence and target offset
-  van.derive(() => {
+  dom.derive(() => {
     if (
       position.val !== undefined &&
       initialPosition !== "floating" &&
@@ -388,7 +388,7 @@ export const Tooltip = (
   });
 
   // align tooltip based on position and target offset
-  van.derive(() => {
+  dom.derive(() => {
     if (
       tooltipWidth.val !== undefined &&
       tooltipHeight.val !== undefined &&

src/packages/tour/components/DisableInteraction.ts

@@ -1,9 +1,9 @@
-import van, { State } from "../../dom/van";
+import dom, { State } from "../../dom";
 import { disableInteractionClassName } from "../classNames";
 import { setPositionRelativeToStep } from "../position";
 import { TourStep } from "../steps";
 
-const { div } = van.tags;
+const { div } = dom.tags;
 
 export type HelperLayerProps = {
   currentStep: State<number | undefined>;
@@ -20,7 +20,7 @@ export const DisableInteraction = ({
   targetElement,
   helperElementPadding,
 }: HelperLayerProps) => {
-  const step = van.derive(() =>
+  const step = dom.derive(() =>
     currentStep.val !== undefined ? steps[currentStep.val] : null
   );
 
@@ -33,7 +33,7 @@ export const DisableInteraction = ({
       className: disableInteractionClassName,
     });
 
-    van.derive(() => {
+    dom.derive(() => {
       // set the position of the reference layer if the refreshes signal changes
       if (!step.val || refreshes.val == undefined) return;
 

src/packages/tour/components/FloatingElement.ts

@@ -1,7 +1,7 @@
-import van, { State } from "../../dom/van";
+import dom, { State } from "../../dom";
 import { floatingElementClassName } from "../classNames";
 
-const { div } = van.tags;
+const { div } = dom.tags;
 
 export type FloatingElementProps = {
   currentStep: State<number | undefined>;
@@ -12,7 +12,7 @@ export const FloatingElement = ({ currentStep }: FloatingElementProps) => {
     className: floatingElementClassName,
   });
 
-  van.derive(() => {
+  dom.derive(() => {
     // meaning the tour has ended so we should remove the floating element
     if (currentStep.val === undefined) {
       floatingElement.remove();

src/packages/tour/components/HelperLayer.ts

@@ -1,10 +1,10 @@
 import { style } from "../../../util/style";
-import van, { State } from "../../dom/van";
+import dom, { State } from "../../dom";
 import { helperLayerClassName } from "../classNames";
 import { setPositionRelativeToStep } from "../position";
 import { TourStep } from "../steps";
 
-const { div } = van.tags;
+const { div } = dom.tags;
 
 const getClassName = ({
   step,
@@ -47,7 +47,7 @@ export const HelperLayer = ({
   overlayOpacity,
   helperLayerPadding,
 }: HelperLayerProps) => {
-  const step = van.derive(() =>
+  const step = dom.derive(() =>
     currentStep.val !== undefined ? steps[currentStep.val] : null
   );
 
@@ -60,7 +60,7 @@ export const HelperLayer = ({
     }),
   });
 
-  van.derive(() => {
+  dom.derive(() => {
     // set the new position if the step or refreshes change
     if (!step.val || refreshes.val === undefined) return;
 

src/packages/tour/components/OverlayLayer.ts

@@ -1,9 +1,9 @@
 import { style } from "../../../util/style";
 import { overlayClassName } from "../classNames";
-import van from "../../dom/van";
+import dom from "../../dom";
 import { Tour } from "../tour";
 
-const { div } = van.tags;
+const { div } = dom.tags;
 
 export type OverlayLayerProps = {
   exitOnOverlayClick: boolean;

src/packages/tour/components/ReferenceLayer.ts

@@ -1,9 +1,9 @@
-import van from "../../dom/van";
+import dom from "../../dom";
 import { tooltipReferenceLayerClassName } from "../classNames";
 import { setPositionRelativeToStep } from "../position";
 import { TourTooltip, TourTooltipProps } from "./TourTooltip";
 
-const { div } = van.tags;
+const { div } = dom.tags;
 
 export type ReferenceLayerProps = TourTooltipProps & {
   targetElement: HTMLElement;
@@ -22,7 +22,7 @@ export const ReferenceLayer = ({
     TourTooltip(props)
   );
 
-  van.derive(() => {
+  dom.derive(() => {
     // set the position of the reference layer if the refreshes signal changes
     if (props.refreshes.val == undefined) return;
 

src/packages/tour/components/TourRoot.ts

@@ -1,4 +1,4 @@
-import van from "../../dom/van";
+import dom from "../../dom";
 import { ReferenceLayer } from "./ReferenceLayer";
 import { HelperLayer } from "./HelperLayer";
 import { Tour } from "../tour";
@@ -8,7 +8,7 @@ import { nextStep, previousStep } from "../steps";
 import { doneButtonClassName } from "../classNames";
 import { style } from "../../../util/style";
 
-const { div } = van.tags;
+const { div } = dom.tags;
 
 export type TourRootProps = {
   tour: Tour;
@@ -29,7 +29,7 @@ export const TourRoot = ({ tour }: TourRootProps) => {
     helperLayerPadding: tour.getOption("helperElementPadding"),
   });
 
-  const opacity = van.state(0);
+  const opacity = dom.state(0);
   // render the tooltip immediately when the tour starts
   // but we reset the transition duration to 300ms when the tooltip is rendered for the first time
   let tooltipTransitionDuration = 0;
@@ -48,7 +48,7 @@ export const TourRoot = ({ tour }: TourRootProps) => {
         return null;
       }
 
-      const step = van.derive(() =>
+      const step = dom.derive(() =>
         currentStepSignal.val !== undefined
           ? steps[currentStepSignal.val]
           : null
@@ -166,7 +166,7 @@ export const TourRoot = ({ tour }: TourRootProps) => {
     }
   );
 
-  van.derive(() => {
+  dom.derive(() => {
     // to clean up the root element when the tour is done
     if (currentStepSignal.val === undefined) {
       opacity.val = 0;