Add Vite Support

packages/storybook-preset-vite/README.md

@@ -0,0 +1,3 @@
+# Storybook Vite preset for PixiJS
+
+Storybook PixiJS Vite preset

packages/storybook-preset-vite/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@pixi/storybook-preset-vite",
+  "version": "0.0.6",
+  "description": "Storybook for PixiJS: View PixiJS Components in isolation with Hot Reloading.",
+  "homepage": "https://github.com/pixijs/storybook/tree/main/packages/storybook-preset-vite",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pixijs/storybook.git",
+    "directory": "packages/storybook-preset-vite"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": {
+      "require": "./package.json",
+      "import": "./package.json",
+      "types": "./package.json"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "tsc --noEmit",
+    "build": "../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@storybook/builder-vite": "^7.0.0",
+    "@storybook/types": "^7.0.0",
+    "@types/node": "^16.0.0",
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
+  },
+  "devDependencies": {
+    "typescript": "~4.6.3"
+  },
+  "engines": {
+    "node": ">=10.13.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts"
+    ],
+    "platform": "node"
+  }
+}

packages/storybook-preset-vite/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/index');

packages/storybook-preset-vite/src/index.ts

@@ -0,0 +1,7 @@
+import type { StorybookConfigVite } from "./types";
+
+export * from "./types";
+
+export const vite: StorybookConfigVite["viteFinal"] = (config) => {
+  return config;
+};

packages/storybook-preset-vite/src/types.ts

@@ -0,0 +1,5 @@
+export type {
+  StorybookConfigVite,
+  BuilderOptions,
+} from "@storybook/builder-vite";
+export type { StorybookConfig, TypescriptOptions } from "@storybook/types";

packages/storybook-preset-vite/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "include": ["src/**/*"],
+}

packages/storybook-vite/README.md

@@ -0,0 +1,3 @@
+# Storybook PixiJS Framework
+
+Storybook PixiJS Framework

packages/storybook-vite/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@pixi/storybook-vite",
+  "version": "0.0.6",
+  "description": "Storybook for PixiJS: View Pixi Components in isolation with Hot Reloading.",
+  "homepage": "https://github.com/pixijs/storybook/tree/main/packages/storybook-vite",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pixijs/storybook.git",
+    "directory": "packages/storybook-vite"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./package.json": {
+      "require": "./package.json",
+      "import": "./package.json",
+      "types": "./package.json"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "tsc --noEmit",
+    "build": "../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@pixi/storybook-preset-vite": "^0.0.6",
+    "@pixi/storybook-renderer": "^0.0.6",
+    "@storybook/builder-vite": "^7.0.0",
+    "@storybook/core-common": "^7.0.0",
+    "@types/node": "^14.14.20 || ^16.0.0",
+    "@types/offscreencanvas": "^2019.7.0",
+    "global": "^4.4.0",
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
+  },
+  "devDependencies": {
+    "typescript": "~4.6.3"
+  },
+  "engines": {
+    "node": ">=10.13.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts"
+    ],
+    "platform": "node"
+  }
+}

packages/storybook-vite/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

packages/storybook-vite/preview.js

@@ -0,0 +1 @@
+export * from './dist/config';

packages/storybook-vite/src/index.ts

@@ -0,0 +1,4 @@
+/// <reference types="offscreencanvas" />
+
+export * from '@pixi/storybook-renderer';
+export * from './types';

packages/storybook-vite/src/preset.ts

@@ -0,0 +1,32 @@
+import path from "path";
+import type { PresetProperty } from "@storybook/types";
+import type { StorybookConfig } from "./types";
+
+export const addons: PresetProperty<"addons", StorybookConfig> = [
+  path.dirname(
+    require.resolve(path.join("@pixi/storybook-preset-vite", "package.json"))
+  ),
+  path.dirname(
+    require.resolve(path.join("@pixi/storybook-renderer", "package.json"))
+  ),
+];
+
+export const core: PresetProperty<"core", StorybookConfig> = async (
+  config,
+  options
+) => {
+  const framework = await options.presets.apply<StorybookConfig["framework"]>(
+    "framework"
+  );
+
+  return {
+    ...config,
+    builder: {
+      name: path.dirname(
+        require.resolve(path.join("@storybook/builder-vite", "package.json"))
+      ) as "@storybook/builder-vite",
+      options:
+        typeof framework === "string" ? {} : framework.options.builder || {},
+    },
+  };
+};

packages/storybook-vite/src/types.ts

@@ -0,0 +1,43 @@
+import type {
+  BuilderOptions,
+  StorybookConfig as StorybookConfigBase,
+  StorybookConfigVite,
+  TypescriptOptions as TypescriptOptionsBuilder,
+} from "../../storybook-preset-vite/src/types";
+
+type FrameworkName = "@pixi/storybook-vite";
+type BuilderName = "@storybook/builder-vite";
+
+export type FrameworkOptions = {
+  builder?: BuilderOptions;
+};
+
+type StorybookConfigFramework = {
+  framework:
+    | FrameworkName
+    | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+      };
+  frameworkPath?: string;
+  core?: StorybookConfigBase["core"] & {
+    builder?:
+      | BuilderName
+      | {
+          name: BuilderName;
+          options: BuilderOptions;
+        };
+  };
+  typescript?: Partial<TypescriptOptionsBuilder> &
+    StorybookConfigBase["typescript"];
+};
+
+/**
+ * The interface for Storybook configuration in `main.ts` files.
+ */
+export type StorybookConfig = Omit<
+  StorybookConfigBase,
+  keyof StorybookConfigVite | keyof StorybookConfigFramework
+> &
+  StorybookConfigVite &
+  StorybookConfigFramework;

packages/storybook-vite/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "include": ["src/**/*"],
+}