@cfp-studio/plugin-vue3 16.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Zenc Labs Pty Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.mts

@@ -0,0 +1,5 @@
+import { FrameworkPluginFactory } from '@cfp-studio/core';
+
+declare const vue3FrameworkPlugin: FrameworkPluginFactory;
+
+export { vue3FrameworkPlugin as default };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { FrameworkPluginFactory } from '@cfp-studio/core';
+
+declare const vue3FrameworkPlugin: FrameworkPluginFactory;
+
+export { vue3FrameworkPlugin as default };

package/dist/index.mjs

@@ -0,0 +1,656 @@
+import { intersectionType, objectType, NODE_TYPE, maybeOptionalType, UNKNOWN_TYPE, helpers, createTypeAnalyzer } from '@cfp-studio/type-analyzer';
+import { ReaderListeners, createStackedReader, createFileSystemReader } from '@cfp-studio/vfs';
+import path from 'path';
+import url from 'url';
+import { generatePreviewableId, decodePreviewableId } from '@cfp-studio/analyzer-api';
+import { parseSerializableValue } from '@cfp-studio/serializable-values';
+import { extractStoriesInfo, extractArgs, extractCsf3Stories, resolvePreviewableId } from '@cfp-studio/storybook-helpers';
+import ts from 'typescript';
+import { parse } from '@vue/compiler-sfc';
+
+function analyzeFromTemplate(resolver, virtualVueTsAbsoluteFilePath) {
+  const sourceFile = resolver.sourceFile(virtualVueTsAbsoluteFilePath);
+  let props = UNKNOWN_TYPE;
+  let types = {};
+  let slots = [];
+  for (const statement of sourceFile?.statements || []) {
+    const definedProps = extractDefinePropsFromStatement(resolver, statement);
+    if (definedProps) {
+      return {
+        props: definedProps.type,
+        types: definedProps.collected
+      };
+    }
+    if (ts.isTypeAliasDeclaration(statement)) {
+      if (statement.name.text === "PJS_Props") {
+        const type = resolver.checker.getTypeAtLocation(statement);
+        const defineComponentProps = resolver.resolveType(type);
+        props = defineComponentProps.type;
+        types = defineComponentProps.collected;
+      } else if (statement.name.text === "PJS_Slots") {
+        const slotsType = resolver.checker.getTypeAtLocation(statement);
+        const resolvedSlotsTypeName = resolver.resolveType(slotsType);
+        if (resolvedSlotsTypeName.type.kind === "name") {
+          const resolvedSlotsType = resolvedSlotsTypeName.collected[resolvedSlotsTypeName.type.name];
+          if (resolvedSlotsType?.type.kind === "tuple") {
+            for (const item of resolvedSlotsType.type.items) {
+              if (item.kind === "literal" && typeof item.value === "string") {
+                slots.push(item.value);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  return {
+    props: intersectionType([
+      props,
+      objectType(
+        Object.fromEntries(
+          slots.map((slotName) => [`slot:${slotName}`, NODE_TYPE])
+        )
+      )
+    ]),
+    types
+  };
+}
+function extractDefinePropsFromStatement(resolver, statement) {
+  if (ts.isExpressionStatement(statement)) {
+    const definedProps = extractDefinePropsFromExpression(
+      resolver,
+      statement.expression
+    );
+    if (definedProps) {
+      return definedProps;
+    }
+  }
+  if (ts.isVariableStatement(statement)) {
+    for (const variableDeclaration of statement.declarationList.declarations) {
+      if (!variableDeclaration.initializer) {
+        continue;
+      }
+      const definedProps = extractDefinePropsFromExpression(
+        resolver,
+        variableDeclaration.initializer
+      );
+      if (definedProps) {
+        return definedProps;
+      }
+    }
+  }
+  return null;
+}
+function extractDefinePropsFromExpression(resolver, expression) {
+  if (ts.isBinaryExpression(expression) && expression.operatorToken.kind === ts.SyntaxKind.EqualsToken) {
+    return extractDefinePropsFromExpression(resolver, expression.right);
+  }
+  if (!ts.isCallExpression(expression) || !ts.isIdentifier(expression.expression)) {
+    return null;
+  }
+  const functionName = expression.expression.text;
+  if (functionName === "defineProps") {
+    const signature = resolver.checker.getResolvedSignature(expression);
+    if (signature) {
+      return resolver.resolveType(signature.getReturnType());
+    }
+  }
+  if (functionName === "withDefaults") {
+    const [firstArgument, secondArgument] = expression.arguments;
+    if (!firstArgument || !secondArgument) {
+      return null;
+    }
+    const definePropsType = extractDefinePropsFromExpression(
+      resolver,
+      firstArgument
+    );
+    if (!definePropsType) {
+      return null;
+    }
+    const defaultsType = resolver.resolveType(
+      resolver.checker.getTypeAtLocation(secondArgument)
+    );
+    if (defaultsType.type.kind !== "object" || definePropsType.type.kind !== "object") {
+      return definePropsType;
+    }
+    const fieldsWithDefaultValue = new Set(
+      Object.keys(defaultsType.type.fields)
+    );
+    return {
+      type: objectType(
+        Object.fromEntries(
+          Object.entries(definePropsType.type.fields).map(
+            ([fieldKey, fieldType]) => [
+              fieldKey,
+              maybeOptionalType(
+                fieldType,
+                fieldsWithDefaultValue.has(fieldKey)
+              )
+            ]
+          )
+        )
+      ),
+      collected: definePropsType.collected
+    };
+  }
+  return null;
+}
+
+function inferComponentNameFromVuePath(filePath) {
+  return path.basename(filePath, path.extname(filePath));
+}
+
+async function crawlFile(reader, resolver, rootDir, absoluteFilePath) {
+  const vueAbsoluteFilePath = extractVueFilePath(absoluteFilePath);
+  if (vueAbsoluteFilePath) {
+    const virtualVueTsAbsoluteFilePath = vueAbsoluteFilePath + ".ts";
+    const fileEntry = reader.readSync(vueAbsoluteFilePath);
+    if (fileEntry?.kind !== "file") {
+      return [];
+    }
+    return [
+      {
+        id: generatePreviewableId({
+          filePath: path.relative(rootDir, vueAbsoluteFilePath),
+          name: inferComponentNameFromVuePath(vueAbsoluteFilePath)
+        }),
+        sourcePosition: {
+          start: 0,
+          end: fileEntry.size()
+        },
+        exported: true,
+        analyze: async () => analyzeFromTemplate(resolver, virtualVueTsAbsoluteFilePath)
+      }
+    ];
+  }
+  const sourceFile = resolver.sourceFile(absoluteFilePath);
+  if (!sourceFile) {
+    return [];
+  }
+  const functions = [];
+  for (const statement of sourceFile.statements) {
+    if (ts.isExportAssignment(statement)) {
+      if (ts.isIdentifier(statement.expression)) {
+        continue;
+      }
+      functions.push(["default", statement, statement.expression]);
+    } else if (ts.isVariableStatement(statement)) {
+      for (const declaration of statement.declarationList.declarations) {
+        if (!ts.isIdentifier(declaration.name) || !declaration.initializer) {
+          continue;
+        }
+        functions.push([
+          declaration.name.text,
+          statement,
+          declaration.initializer
+        ]);
+      }
+    } else if (ts.isFunctionDeclaration(statement)) {
+      const isDefaultExport = !!statement.modifiers?.find(
+        (m) => m.kind === ts.SyntaxKind.ExportKeyword
+      ) && !!statement.modifiers?.find(
+        (m) => m.kind === ts.SyntaxKind.DefaultKeyword
+      );
+      const name = statement.name?.text;
+      if (isDefaultExport || name) {
+        functions.push([name || "default", statement, statement]);
+      }
+    }
+  }
+  const storiesInfo = extractStoriesInfo(sourceFile);
+  const previewables = [];
+  const nameToExportedName = helpers.extractExportedNames(sourceFile);
+  const args = extractArgs(sourceFile);
+  async function extractPreviewable(basePreviewable, node, name) {
+    const storyArgs = args[name];
+    const isExported = name === "default" || !!nameToExportedName[name];
+    if (storiesInfo && storyArgs && isExported) {
+      const associatedComponent = extractStoryAssociatedComponent(
+        rootDir,
+        resolver,
+        storiesInfo.component
+      );
+      return {
+        ...basePreviewable,
+        analyze: async () => ({
+          args: {
+            sourcePosition: {
+              start: storyArgs.getStart(),
+              end: storyArgs.getEnd()
+            },
+            value: await parseSerializableValue(storyArgs)
+          }
+        }),
+        associatedComponent
+      };
+    }
+    const type = resolver.checker.getTypeAtLocation(node);
+    for (const callSignature of type.getCallSignatures()) {
+      const returnType = callSignature.getReturnType();
+      if (isJsxElement(returnType)) {
+        return {
+          ...basePreviewable,
+          exported: isExported,
+          analyze: async () => ({
+            // TODO: Handle JSX properties.
+            props: UNKNOWN_TYPE,
+            types: {}
+          })
+        };
+      }
+      if (storiesInfo && isExported && returnType.getProperty("template")) {
+        const associatedComponent = extractStoryAssociatedComponent(
+          rootDir,
+          resolver,
+          storiesInfo.component
+        );
+        return {
+          ...basePreviewable,
+          analyze: async () => ({ args: null }),
+          associatedComponent
+        };
+      }
+    }
+    return null;
+  }
+  for (const [name, statement, node] of functions) {
+    const previewable = await extractPreviewable(
+      {
+        id: generatePreviewableId({
+          filePath: path.relative(rootDir, absoluteFilePath),
+          name
+        }),
+        sourcePosition: {
+          start: statement.getStart(),
+          end: statement.getEnd()
+        }
+      },
+      node,
+      name
+    );
+    if (previewable) {
+      previewables.push(previewable);
+    }
+  }
+  return [
+    ...previewables,
+    ...(await extractCsf3Stories(rootDir, resolver, sourceFile, async (id) => {
+      const { filePath } = decodePreviewableId(id);
+      const absoluteFilePath2 = path.join(rootDir, filePath);
+      const vueComponents = await crawlFile(
+        reader,
+        resolver,
+        rootDir,
+        absoluteFilePath2
+      );
+      const component = absoluteFilePath2.endsWith(".vue.ts") ? vueComponents[0] : vueComponents.find((c) => c.id === id);
+      if (!component || !("exported" in component)) {
+        return {
+          props: UNKNOWN_TYPE,
+          types: {}
+        };
+      }
+      return component.analyze();
+    })).map((story) => {
+      if (!story.associatedComponent?.id.includes(".vue.ts:")) {
+        return story;
+      }
+      const { filePath: associatedComponentFilePath } = decodePreviewableId(
+        story.associatedComponent.id
+      );
+      const associatedComponentVueFilePath = stripTsExtension(
+        associatedComponentFilePath
+      );
+      return {
+        ...story,
+        associatedComponent: {
+          ...story.associatedComponent,
+          id: generatePreviewableId({
+            filePath: associatedComponentVueFilePath,
+            name: inferComponentNameFromVuePath(associatedComponentVueFilePath)
+          })
+        }
+      };
+    })
+  ];
+}
+function stripTsExtension(filePath) {
+  return filePath.substring(0, filePath.length - 3);
+}
+function extractVueFilePath(filePath) {
+  if (filePath.endsWith(".vue")) {
+    return filePath;
+  }
+  if (filePath.endsWith(".vue.ts")) {
+    return filePath.substring(0, filePath.length - 3);
+  }
+  return null;
+}
+function extractStoryAssociatedComponent(rootDir, resolver, component) {
+  const resolvedStoriesPreviewableId = resolvePreviewableId(
+    rootDir,
+    resolver.checker,
+    component
+  );
+  if (!resolvedStoriesPreviewableId) {
+    return null;
+  }
+  const { filePath } = decodePreviewableId(resolvedStoriesPreviewableId);
+  const vueFilePath = extractVueFilePath(filePath);
+  if (vueFilePath) {
+    return {
+      id: generatePreviewableId({
+        filePath: vueFilePath,
+        name: inferComponentNameFromVuePath(vueFilePath)
+      }),
+      analyze: async () => analyzeFromTemplate(resolver, vueFilePath + ".ts")
+    };
+  } else {
+    return {
+      id: resolvedStoriesPreviewableId,
+      analyze: async () => (
+        // TODO: Handle JSX properties.
+        {
+          props: UNKNOWN_TYPE,
+          types: {}
+        }
+      )
+    };
+  }
+}
+const jsxElementTypes = /* @__PURE__ */ new Set(["Element"]);
+function isJsxElement(type) {
+  if (type.isUnion()) {
+    for (const subtype of type.types) {
+      if (isJsxElement(subtype)) {
+        return true;
+      }
+    }
+  }
+  return jsxElementTypes.has(type.symbol?.getEscapedName().toString());
+}
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+function createVueTypeScriptReader(reader) {
+  return new VueTypeScriptReader(reader);
+}
+class VueTypeScriptReader {
+  constructor(reader) {
+    this.reader = reader;
+    __publicField(this, "listeners", new ReaderListeners());
+    reader.listeners.add({
+      onChange: (absoluteFilePath, info) => {
+        this.listeners.notify(absoluteFilePath, info);
+      }
+    });
+    this.observe = reader.observe?.bind(reader);
+  }
+  async read(absoluteFilePath) {
+    if (absoluteFilePath.endsWith(".vue.ts")) {
+      const source = await this.reader.read(
+        absoluteFilePath.substr(0, absoluteFilePath.length - 3)
+      );
+      if (source?.kind !== "file") {
+        return null;
+      }
+      const name = path.basename(absoluteFilePath);
+      return {
+        kind: "file",
+        name,
+        realPath: async () => null,
+        lastModifiedMillis: () => source.lastModifiedMillis(),
+        read: async () => convertToTypeScript(await source.read(), name),
+        size: () => source.size()
+      };
+    }
+    return this.reader.read(absoluteFilePath);
+  }
+  readSync(absoluteFilePath) {
+    if (absoluteFilePath.endsWith(".vue.ts")) {
+      const source = this.reader.readSync(
+        absoluteFilePath.substr(0, absoluteFilePath.length - 3)
+      );
+      if (source?.kind !== "file") {
+        return null;
+      }
+      const name = path.basename(absoluteFilePath);
+      return {
+        kind: "file",
+        name,
+        realPath: () => null,
+        lastModifiedMillis: () => source.lastModifiedMillis(),
+        read: () => convertToTypeScript(source.read(), name),
+        size: () => source.size()
+      };
+    }
+    const entry = this.reader.readSync(absoluteFilePath);
+    if (entry?.kind === "file" && (entry.name.endsWith(".jsx") || entry.name.endsWith(".tsx"))) {
+      return {
+        ...entry,
+        read: () => `/// <reference types="@vue/runtime-dom" />
+${entry.read()}`
+      };
+    }
+    return entry;
+  }
+}
+function convertToTypeScript(vueTemplateSource, name) {
+  const parsed = parse(vueTemplateSource);
+  let pjsSlotsType = "[]";
+  if (parsed.descriptor.template?.ast) {
+    const slots = extractSlots(parsed.descriptor.template.ast);
+    pjsSlotsType = `[${slots.map((slotName) => JSON.stringify(slotName)).join(", ")}]`;
+  }
+  const pjsSlotsTypeDeclaration = `type PJS_Slots = ${pjsSlotsType};`;
+  if (parsed.descriptor.scriptSetup) {
+    return `import { defineProps } from '@vue/runtime-core';
+${parsed.descriptor.scriptSetup.content}
+export default {};${pjsSlotsTypeDeclaration}`;
+  } else if (parsed.descriptor.script) {
+    const lang = parsed.descriptor.script.lang;
+    if (lang && !["js", "javascript", "ts", "typescript"].includes(lang)) {
+      return "export default {}";
+    }
+    const scriptContent = parsed.descriptor.script.content;
+    const sourceFile = ts.createSourceFile(
+      `${name}.vue.ts`,
+      scriptContent,
+      ts.ScriptTarget.Latest
+    );
+    let component = null;
+    for (const node of sourceFile.statements) {
+      if (ts.isExportAssignment(node)) {
+        component = extractDefineComponentArgument(node.expression);
+      }
+    }
+    let pjsComponentDeclaration = "const pjs_component = null;";
+    if (component) {
+      pjsComponentDeclaration = ts.createPrinter().printFile(
+        ts.factory.createSourceFile(
+          [
+            ts.factory.createVariableStatement(
+              [],
+              ts.factory.createVariableDeclarationList(
+                [
+                  ts.factory.createVariableDeclaration(
+                    "pjs_component",
+                    void 0,
+                    void 0,
+                    ts.isObjectLiteralExpression(component) ? ts.factory.createAsExpression(
+                      component,
+                      ts.factory.createTypeReferenceNode("const")
+                    ) : component
+                  )
+                ],
+                ts.NodeFlags.Const
+              )
+            )
+          ],
+          ts.factory.createToken(ts.SyntaxKind.EndOfFileToken),
+          0
+        )
+      );
+    }
+    return `
+${scriptContent}
+${pjsComponentDeclaration}
+
+import type { PropType as PJS_PropType } from "@vue/runtime-core";
+
+type PJS_TypeOrUnion<T> = PJS_PropType<T> | ReadonlyArray<PJS_PropType<T>>;
+type PJS_OptionalPropType<T> = PJS_TypeOrUnion<T> | {type: PJS_TypeOrUnion<T>; required?: false};
+type PJS_RequiredPropType<T> = {type: PJS_TypeOrUnion<T>; required: true};
+type PJS_OptionalPropsKeys<T> = {
+  [K in keyof T]: T[K] extends PJS_OptionalPropType<any> ? K : never;
+}[keyof T];
+type PJS_RequiredPropsKeys<T> = {
+  [K in keyof T]: T[K] extends PJS_RequiredPropType<any> ? K : never;
+}[keyof T];
+type PJS_CombinedProps<T> = T extends readonly [...any] ? {
+  [K in T[number]]: unknown
+} : ({
+  [K in PJS_OptionalPropsKeys<T>]?: T[K] extends PJS_OptionalPropType<infer S> ? S : never;
+} & {
+  [K in PJS_RequiredPropsKeys<T>]: T[K] extends PJS_RequiredPropType<infer S> ? S : never;
+});
+type PJS_ExtractProps<T> = T extends { props: any } ? PJS_CombinedProps<T['props']> : {}
+type PJS_Props = PJS_ExtractProps<typeof pjs_component>;
+${pjsSlotsTypeDeclaration}
+`;
+  } else {
+    return `export default {};${pjsSlotsTypeDeclaration}`;
+  }
+}
+function extractDefineComponentArgument(node) {
+  if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && node.expression.text === "defineComponent" && node.arguments.length > 0) {
+    return node.arguments[0];
+  }
+  return node;
+}
+function extractSlots(element) {
+  namedSlot:
+    if ("tag" in element && element.tag === "slot") {
+      let slotName = "default";
+      for (const prop of element.props) {
+        if (prop.name === "name" && prop.type === 6 && prop.value) {
+          slotName = prop.value.content;
+        }
+        if (prop.name === "bind" && prop.type === 7 && prop.arg?.type === 4 && prop.arg.content === "name") {
+          break namedSlot;
+        }
+      }
+      return [slotName];
+    }
+  const result = [];
+  for (const child of element.children) {
+    if (child.type === 1) {
+      result.push(...extractSlots(child));
+    }
+  }
+  return result;
+}
+
+const vue3FrameworkPlugin = {
+  info: {
+    apiVersion: 5,
+    name: "@cfp-studio/plugin-vue3"
+  },
+  isCompatible: async (dependencies) => {
+    const version = await dependencies["vue"]?.readInstalledVersion() || await dependencies["nuxt"]?.readInstalledVersion() || await dependencies["nuxt3"]?.readInstalledVersion();
+    if (!version) {
+      return false;
+    }
+    return parseInt(version) === 3;
+  },
+  async create({ rootDir, reader }) {
+    const { default: createVuePlugin } = await import('@vitejs/plugin-vue');
+    const { default: vueJsxPlugin } = await import('@vitejs/plugin-vue-jsx');
+    const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
+    const previewDirPath = path.resolve(__dirname, "..", "preview");
+    const typeAnalyzer = createTypeAnalyzer({
+      rootDir,
+      reader: createStackedReader([
+        createVueTypeScriptReader(reader),
+        createFileSystemReader({
+          mapping: {
+            from: path.join(previewDirPath, "modules"),
+            to: path.join(rootDir, "node_modules")
+          },
+          watch: false
+        })
+      ]),
+      tsCompilerOptions: {
+        types: ["vue/jsx"]
+      }
+    });
+    return {
+      defaultWrapperPath: "__previewjs__/Wrapper.vue",
+      previewDirPath,
+      typeAnalyzer,
+      crawlFiles: async (filePaths) => {
+        const absoluteFilePaths = filePaths.map(
+          (f) => path.isAbsolute(f) ? f : path.join(rootDir, f)
+        );
+        const resolver = typeAnalyzer.analyze(
+          absoluteFilePaths.map((p) => p.endsWith(".vue") ? p + ".ts" : p)
+        );
+        const components = [];
+        const stories = [];
+        for (const absoluteFilePath of absoluteFilePaths) {
+          for (const previewable of await crawlFile(
+            reader,
+            resolver,
+            rootDir,
+            absoluteFilePath
+          )) {
+            if ("exported" in previewable) {
+              components.push(previewable);
+            } else {
+              stories.push(previewable);
+            }
+          }
+        }
+        return {
+          components,
+          stories
+        };
+      },
+      viteConfig: (configuredPlugins) => {
+        return {
+          plugins: [
+            ...configuredPlugins,
+            configuredPlugins.find((plugin) => plugin.name === "vite:vue") ? null : createVuePlugin(),
+            configuredPlugins.find((plugin) => plugin.name.includes("jsx")) ? null : vueJsxPlugin(),
+            {
+              name: "previewjs:optimize-deps",
+              config: () => ({
+                optimizeDeps: {
+                  include: ["vue"]
+                }
+              })
+            }
+          ],
+          esbuild: {
+            banner: `import { h } from 'vue';`,
+            jsxFactory: "h"
+          },
+          resolve: {
+            alias: {
+              vue: "vue/dist/vue.esm-bundler.js"
+            }
+          }
+        };
+      },
+      dispose: () => {
+        typeAnalyzer.dispose();
+      }
+    };
+  }
+};
+
+export { vue3FrameworkPlugin as default };