Merge pull request #59 from hipstersmoothie/wc

Web Component

Author: hipstersmoothie

packages/interface/src/interface.ts

@@ -103,13 +103,18 @@ export function getPanelDomAttributes({
   collapsible: boolean | undefined;
   collapsed: boolean | undefined;
 }) {
-  return {
+  const attrs: Record<string, string | boolean | undefined> = {
     id: id,
     "data-splitter-group-id": groupId,
     "data-splitter-type": "panel",
     "data-splitter-id": id,
-    "data-collapsed": collapsible ? collapsed : undefined,
   };
+
+  if (collapsible) {
+    attrs["data-collapsed"] = collapsed;
+  }
+
+  return attrs;
 }
 
 export interface SharedPanelResizerProps

packages/interface/src/test.ts

@@ -117,7 +117,7 @@ async function expectTemplate(
       }
     },
     {
-      timeout: 2_000,
+      timeout: 4_000,
     }
   );
 

packages/solid/README.md

@@ -36,17 +36,6 @@ function Example() {
 }
 ```
 
-## Server Side Rendering + Strict Mode
-
-While not required for the simple case, for anything more complex you will
-need to add an `id` prop to your panels and handles.
-This is so that the component can tell all of the components apart during layout and rendering.
-
-Features that require `id`:
-
-- Conditional Panels
-- Server Side Rendering
-
 ## Prior Art
 
 This library is heavily inspired by the following libraries:

packages/state/src/index.ts

@@ -13,7 +13,7 @@ const COLLAPSE_THRESHOLD = 50;
 export type PixelUnit = `${number}px`;
 export type PercentUnit = `${number}%`;
 export type Unit = PixelUnit | PercentUnit;
-type Orientation = "horizontal" | "vertical";
+export type Orientation = "horizontal" | "vertical";
 
 export interface ParsedPercentUnit {
   type: "percent";

packages/svelte/README.md

@@ -40,17 +40,6 @@ npm install @window-splitter/svelte
 - Customizable
 - TypeScript support
 
-## Server Side Rendering + Strict Mode
-
-While not required for the simple case, for anything more complex you will
-need to add an `id` prop to your panels and handles.
-This is so that the component can tell all of the components apart during layout and rendering.
-
-Features that require `id`:
-
-- Conditional Panels
-- Server Side Rendering
-
 ## Prior Art
 
 This library is heavily inspired by the following libraries:

packages/vue/README.md

@@ -42,17 +42,6 @@ import { PanelGroup } from "@window-splitter/vue";
 - Customizable
 - TypeScript support
 
-## Server Side Rendering + Strict Mode
-
-While not required for the simple case, for anything more complex you will
-need to add an `id` prop to your panels and handles.
-This is so that the component can tell all of the components apart during layout and rendering.
-
-Features that require `id`:
-
-- Conditional Panels
-- Server Side Rendering
-
 ## Prior Art
 
 This library is heavily inspired by the following libraries:

packages/vue/package.json

@@ -56,7 +56,7 @@
     "typescript-eslint": "^8.1.0",
     "vite": "^6.3.3",
     "vite-plugin-dts": "^4.5.3",
-    "vitest": "^3.1.2",
+    "vitest": "catalog:",
     "vue": "^3.5.13"
   },
   "dependencies": {

packages/vue/src/PanelResizer.vue

@@ -182,7 +182,7 @@ const combinedProps = computed(() => {
 </script>
 
 <template>
-  <div v-bind="combinedProps" data-panel-resizer :tabindex="disabled ? -1 : 0">
+  <div v-bind="combinedProps" :tabindex="disabled ? -1 : 0">
     <slot />
   </div>
 </template>

packages/web-component/.storybook/main.js

@@ -0,0 +1,27 @@
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+
+/** @type { import('@storybook/web-components-vite').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    {
+      name: getAbsolutePath("@storybook/addon-essentials"),
+      options: {
+        docs: false,
+      },
+    },
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/web-components-vite"),
+    options: {},
+  },
+};
+export default config;

packages/web-component/.storybook/preview.css

@@ -0,0 +1,23 @@
+.panel-group {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  box-sizing: border-box;
+  min-width: 500px;
+  display: block;
+}
+
+.panel {
+  height: 100%;
+  width: 100%;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.panel-resizer {
+  background: red;
+}