Convert to solid.js

shepherd.js/babel.config.cjs

@@ -2,7 +2,7 @@ module.exports = function (api) {
   api.cache(true);
 
   return {
-    presets: ['@babel/preset-typescript'],
+    presets: ['babel-preset-solid', '@babel/preset-typescript'],
     plugins: [
       ['@babel/plugin-transform-typescript', { allowDeclareFields: true }]
     ],

shepherd.js/package.json

@@ -62,13 +62,12 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-terser": "^0.4.4",
     "autoprefixer": "^10.4.21",
+    "babel-preset-solid": "^1.9.3",
     "cssnano": "^7.1.1",
     "dts-bundle-generator": "^9.5.1",
-    "eslint-plugin-svelte": "^2.46.1",
     "execa": "^9.3.1",
     "postcss": "^8.5.6",
     "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.3.3",
     "renamer": "^5.0.0",
     "replace": "^1.2.2",
     "rimraf": "^6.0.1",
@@ -79,11 +78,8 @@
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-serve": "^2.0.2",
-    "rollup-plugin-svelte": "^7.2.2",
     "rollup-plugin-visualizer": "^5.14.0",
-    "svelte": "^5.25.3",
-    "svelte-preprocess": "^6.0.3",
-    "svelte2tsx": "0.7.13",
+    "solid-js": "^1.9.3",
     "typescript": "^5.7.3"
   },
   "packageManager": "[email protected]",

shepherd.js/rollup.config.mjs

@@ -10,10 +10,7 @@ import license from 'rollup-plugin-license';
 import postcss from 'rollup-plugin-postcss';
 import replace from '@rollup/plugin-replace';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
-import { sveltePreprocess } from 'svelte-preprocess';
-import svelte from 'rollup-plugin-svelte';
 import { visualizer } from 'rollup-plugin-visualizer';
-import { emitDts } from 'svelte2tsx';
 import terser from '@rollup/plugin-terser';
 
 const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'));
@@ -23,27 +20,21 @@ const isDev = process.env.DEVELOPMENT;
 const env = isDev ? 'development' : 'production';
 
 const plugins = [
-  svelte({
-    preprocess: sveltePreprocess({
-      globalStyle: true,
-      typescript: true
-    }),
-    emitCss: true
-  }),
   nodeResolve({
     browser: true,
-    exportConditions: ['svelte'],
-    extensions: ['.js', '.json', '.mjs', '.svelte', '.ts'],
-    modulesOnly: true,
+    extensions: ['.js', '.json', '.mjs', '.jsx', '.ts', '.tsx'],
     preferBuiltins: false
   }),
+  babel({
+    extensions: ['.cjs', '.js', '.ts', '.mjs', '.jsx', '.tsx'],
+    babelHelpers: 'bundled',
+    presets: ['babel-preset-solid', '@babel/preset-typescript'],
+    exclude: 'node_modules/**'
+  }),
   replace({
     'process.env.NODE_ENV': JSON.stringify(env),
     preventAssignment: true
   }),
-  babel({
-    extensions: ['.cjs', '.js', '.ts', '.mjs', '.html', '.svelte']
-  }),
   postcss({
     plugins: isDev ? [autoprefixer] : [autoprefixer, cssnanoPlugin],
     extract: 'css/shepherd.css'
@@ -93,28 +84,6 @@ export default [
       unknownGlobalSideEffects: false
     },
     plugins: [
-      {
-        name: 'Build Declarations',
-        buildStart: async () => {
-          console.log('Generating Svelte declarations for ESM');
-
-          await emitDts({
-            svelteShimsPath: import.meta.resolve(
-              'svelte2tsx/svelte-shims-v4.d.ts'
-            ),
-            declarationDir: 'tmp/js'
-          });
-
-          console.log('Rename .svelte.d.ts to .d.svelte.ts');
-
-          await execaCommand(
-            `renamer --find .svelte.d.ts --replace .d.svelte.ts tmp/js/**`,
-            {
-              stdio: 'inherit'
-            }
-          );
-        }
-      },
       ...plugins,
       {
         name: 'After build tweaks',
@@ -136,6 +105,15 @@ export default [
             }
           );
 
+          console.log('Generating TypeScript declarations');
+
+          await execaCommand(
+            `npx tsc --declaration --emitDeclarationOnly --declarationDir tmp/js --skipLibCheck`,
+            {
+              stdio: 'inherit'
+            }
+          );
+
           console.log('Rollup TS declarations to one file');
 
           await execaCommand(

shepherd.js/src/components/shepherd-button.tsx

@@ -0,0 +1,47 @@
+import { createMemo } from 'solid-js';
+import { isFunction } from '../utils/type-check';
+import type { Step, StepOptionsButton } from '../step';
+
+export interface ShepherdButtonProps {
+  config: StepOptionsButton;
+  step: Step;
+}
+
+export default function ShepherdButton(props: ShepherdButtonProps) {
+  const getConfigOption = (option: any) => {
+    if (isFunction(option)) {
+      return option.call(props.step);
+    }
+    return option;
+  };
+
+  const action = createMemo(() =>
+    props.config.action ? props.config.action.bind(props.step.tour) : null
+  );
+
+  const disabled = createMemo(() =>
+    props.config.disabled ? getConfigOption(props.config.disabled) : false
+  );
+
+  const label = createMemo(() =>
+    props.config.label ? getConfigOption(props.config.label) : null
+  );
+
+  const text = createMemo(() =>
+    props.config.text ? getConfigOption(props.config.text) : null
+  );
+
+  return (
+    <button
+      aria-label={label() || undefined}
+      class={`${props.config.classes || ''} shepherd-button ${
+        props.config.secondary ? 'shepherd-button-secondary' : ''
+      }`}
+      disabled={disabled()}
+      onClick={() => action()?.()}
+      tabindex="0"
+      type="button"
+      innerHTML={text()}
+    />
+  );
+}

shepherd.js/src/components/shepherd-cancel-icon.tsx

@@ -0,0 +1,27 @@
+import type { Step } from '../step';
+
+export interface ShepherdCancelIconProps {
+  cancelIcon: {
+    enabled?: boolean;
+    label?: string;
+  };
+  step: Step;
+}
+
+export default function ShepherdCancelIcon(props: ShepherdCancelIconProps) {
+  const handleCancelClick = (e: MouseEvent) => {
+    e.preventDefault();
+    props.step.cancel();
+  };
+
+  return (
+    <button
+      aria-label={props.cancelIcon.label || 'Close Tour'}
+      class="shepherd-cancel-icon"
+      onClick={handleCancelClick}
+      type="button"
+    >
+      <span aria-hidden="true">&times;</span>
+    </button>
+  );
+}

shepherd.js/src/components/shepherd-content.tsx

@@ -0,0 +1,41 @@
+import { Show } from 'solid-js';
+import ShepherdFooter from './shepherd-footer';
+import ShepherdHeader from './shepherd-header';
+import ShepherdText from './shepherd-text';
+import { isUndefined } from '../utils/type-check';
+import type { Step } from '../step';
+
+export interface ShepherdContentProps {
+  descriptionId: string;
+  labelId: string;
+  step: Step;
+}
+
+export default function ShepherdContent(props: ShepherdContentProps) {
+  return (
+    <div class="shepherd-content">
+      <Show
+        when={
+          !isUndefined(props.step.options.title) ||
+          (props.step.options.cancelIcon &&
+            props.step.options.cancelIcon.enabled)
+        }
+      >
+        <ShepherdHeader labelId={props.labelId} step={props.step} />
+      </Show>
+
+      <Show when={!isUndefined(props.step.options.text)}>
+        <ShepherdText descriptionId={props.descriptionId} step={props.step} />
+      </Show>
+
+      <Show
+        when={
+          Array.isArray(props.step.options.buttons) &&
+          props.step.options.buttons.length
+        }
+      >
+        <ShepherdFooter step={props.step} />
+      </Show>
+    </div>
+  );
+}