added marko to framework lists

storybookjs · Oct 9, 2023 · eb98bcb · eb98bcb
1 parent f578878
commit eb98bcb
Show file tree

Hide file tree

Showing 12 changed files with 109 additions and 13 deletions.
diff --git a/code/lib/cli/src/generators/MARKO/index.ts b/code/lib/cli/src/generators/MARKO/index.ts
@@ -0,0 +1,16 @@
+import { CoreBuilder } from '../../project_types';
+import { baseGenerator } from '../baseGenerator';
+import type { Generator } from '../types';
+
+const generator: Generator = async (packageManager, npmOptions, options) => {
+  await baseGenerator(
+    packageManager,
+    npmOptions,
+    { ...options, builder: CoreBuilder.Vite },
+    'marko',
+    {},
+    'marko'
+  );
+};
+
+export default generator;
diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts
@@ -164,9 +164,18 @@ const getFrameworkDetails = (
 const stripVersions = (addons: string[]) => addons.map((addon) => getPackageDetails(addon)[0]);
 
 const hasInteractiveStories = (rendererId: SupportedRenderers) =>
-  ['react', 'angular', 'preact', 'svelte', 'vue', 'vue3', 'html', 'solid', 'qwik'].includes(
-    rendererId
-  );
+  [
+    'react',
+    'angular',
+    'preact',
+    'svelte',
+    'vue',
+    'vue3',
+    'html',
+    'solid',
+    'marko',
+    'qwik',
+  ].includes(rendererId);
 
 const hasFrameworkTemplates = (framework?: SupportedFrameworks) =>
   ['angular', 'nextjs'].includes(framework);

diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts
@@ -190,6 +190,7 @@ const frameworkToRenderer: Record<SupportedFrameworks | SupportedRenderers, Supp
   angular: 'angular',
   ember: 'ember',
   html: 'html',
+  marko: 'marko',
   nextjs: 'react',
   preact: 'preact',
   qwik: 'qwik',

diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts
@@ -29,6 +29,7 @@ import svelteGenerator from './generators/SVELTE';
 import qwikGenerator from './generators/QWIK';
 import svelteKitGenerator from './generators/SVELTEKIT';
 import solidGenerator from './generators/SOLID';
+import markoGenerator from './generators/MARKO';
 import serverGenerator from './generators/SERVER';
 import type { JsPackageManager, PackageManagerName } from './js-package-manager';
 import { JsPackageManagerFactory, useNpmWarning } from './js-package-manager';
@@ -161,6 +162,11 @@ const installStorybook = async <Project extends ProjectType>(
           commandLog('Adding Storybook support to your "SolidJS" app')
         );
 
+      case ProjectType.MARKO:
+        return markoGenerator(packageManager, npmOptions, generatorOptions).then(
+          commandLog('Adding Storybook support to your "Marko" app')
+        );
+
       case ProjectType.UNSUPPORTED:
         paddedLog(`We detected a project type that we don't support yet.`);
         paddedLog(

diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts
@@ -29,7 +29,7 @@ export const externalFrameworks: ExternalFramework[] = [
 ];
 
 // Should match @storybook/<framework>
-export type SupportedFrameworks = 'nextjs' | 'angular' | 'sveltekit' | 'qwik' | 'solid';
+export type SupportedFrameworks = 'nextjs' | 'angular' | 'sveltekit' | 'qwik' | 'solid' | 'marko';
 
 // Should match @storybook/<renderer>
 export type SupportedRenderers =
@@ -45,7 +45,8 @@ export type SupportedRenderers =
   | 'html'
   | 'web-components'
   | 'server'
-  | 'solid';
+  | 'solid'
+  | 'marko';
 
 export const SUPPORTED_RENDERERS: SupportedRenderers[] = [
   'react',
@@ -58,6 +59,7 @@ export const SUPPORTED_RENDERERS: SupportedRenderers[] = [
   'svelte',
   'qwik',
   'solid',
+  'marko',
 ];
 
 export enum ProjectType {
@@ -83,6 +85,7 @@ export enum ProjectType {
   SERVER = 'SERVER',
   NX = 'NX',
   SOLID = 'SOLID',
+  MARKO = 'MARKO',
 }
 
 export enum CoreBuilder {
@@ -243,6 +246,13 @@ export const supportedTemplates: TemplateConfiguration[] = [
       return dependencies.every(Boolean);
     },
   },
+  {
+    preset: ProjectType.MARKO,
+    dependencies: ['marko'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.every(Boolean);
+    },
+  },
   // DO NOT MOVE ANY TEMPLATES BELOW THIS LINE
   // React is part of every Template, after Storybook is initialized once
   {

diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
@@ -106,6 +106,46 @@ const baseTemplates = {
       builder: '@storybook/builder-webpack5',
     },
   },
+  'marko-vite/default-js': {
+    name: 'Marko Latest (Vite | JavaScript)',
+    script: 'npm create vite@latest --yes {{beforeDir}} -- --template marko',
+    expected: {
+      framework: '@storybook/marko-vite',
+      renderer: '@storybook/marko',
+      builder: '@storybook/builder-vite',
+    },
+    skipTasks: ['e2e-tests-dev', 'bench'],
+  },
+  'marko-vite/default-ts': {
+    name: 'Marko Latest (Vite | TypeScript)',
+    script: 'npm create vite@latest --yes {{beforeDir}} -- --template marko-ts',
+    expected: {
+      framework: '@storybook/marko-vite',
+      renderer: '@storybook/marko',
+      builder: '@storybook/builder-vite',
+    },
+    skipTasks: ['e2e-tests-dev', 'bench'],
+  },
+  'marko-webpack5/default-js': {
+    name: 'Marko Latest (Webpack | JavaScript)',
+    script: 'yarn create webpack5-marko {{beforeDir}}',
+    expected: {
+      framework: '@storybook/marko-webpack5',
+      renderer: '@storybook/marko',
+      builder: '@storybook/builder-webpack5',
+    },
+    skipTasks: ['e2e-tests-dev', 'bench'],
+  },
+  'marko-webpack5/default-ts': {
+    name: 'Marko Latest (Webpack | TypeScript)',
+    script: 'yarn create webpack5-marko {{beforeDir}} --typescript',
+    expected: {
+      framework: '@storybook/marko-webpack5',
+      renderer: '@storybook/marko',
+      builder: '@storybook/builder-webpack5',
+    },
+    skipTasks: ['e2e-tests-dev', 'bench'],
+  },
   'nextjs/12-js': {
     name: 'Next.js v12 (Webpack | JavaScript)',
     script:

diff --git a/code/lib/core-common/src/utils/get-storybook-info.ts b/code/lib/core-common/src/utils/get-storybook-info.ts
@@ -15,6 +15,7 @@ export const rendererPackages: Record<string, string> = {
   '@storybook/svelte': 'svelte',
   '@storybook/preact': 'preact',
   '@storybook/server': 'server',
+  '@storybook/marko': 'marko',
   // community (outside of monorepo)
   'storybook-framework-qwik': 'qwik',
   'storybook-solidjs': 'solid',
@@ -40,6 +41,7 @@ export const frameworkPackages: Record<string, string> = {
   '@storybook/vue-webpack5': 'vue-webpack5',
   '@storybook/web-components-vite': 'web-components-vite',
   '@storybook/web-components-webpack5': 'web-components-webpack5',
+  '@storybook/marko': 'marko',
   // community (outside of monorepo)
   'storybook-framework-qwik': 'qwik',
   'storybook-solidjs-vite': 'solid',

diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md
@@ -31,7 +31,7 @@ Then we can access these environment variables anywhere inside our preview JavaS
 
 <!-- prettier-ignore-end -->
 
-<IfRenderer renderer={['html', 'react', 'qwik', 'preact','svelte', 'solid', 'vue', 'web-components' ]}>
+<IfRenderer renderer={['html', 'react', 'qwik', 'preact','svelte', 'solid', 'marko', 'vue', 'web-components' ]}>
 
 <!-- prettier-ignore-start -->
 
@@ -78,7 +78,7 @@ Then you can access this environment variable anywhere, even within your stories
 
 <!-- prettier-ignore-end -->
 
-<IfRenderer renderer={['html', 'react', 'qwik', 'preact','svelte', 'solid', 'vue', 'web-components' ]}>
+<IfRenderer renderer={['html', 'react', 'qwik', 'preact','svelte', 'solid', 'marko', 'vue', 'web-components' ]}>
 
 #### With Vite
 

diff --git a/docs/configure/frameworks.md b/docs/configure/frameworks.md
@@ -12,10 +12,10 @@ You start by [installing](../get-started/install.md) Storybook into an existing
 
 Storybook provides support for the leading industry builders and frameworks. However, that doesn't mean you can't use Storybook with other frameworks. Below is a list of currently supported frameworks divided by their builders.
 
-| Builder | Framework                                                                |
-| ------- | ------------------------------------------------------------------------ |
-| Webpack | React, Angular, Vue, Web Components, NextJS, HTML, Ember, Preact, Svelte |
-| Vite    | React, Vue, Web Components, HTML, Svelte, SvelteKit, Qwik, Solid         |
+| Builder | Framework                                                                       |
+| ------- | ------------------------------------------------------------------------------- |
+| Webpack | React, Angular, Vue, Web Components, NextJS, HTML, Ember, Preact, Svelte, Marko |
+| Vite    | React, Vue, Web Components, HTML, Svelte, SvelteKit, Qwik, Solid, Marko         |
 
 ### What about feature support?
 

diff --git a/docs/frameworks.js b/docs/frameworks.js
@@ -1,6 +1,6 @@
 module.exports = {
   coreFrameworks: ['react', 'vue', 'angular', 'web-components'],
-  communityFrameworks: ['ember', 'html', 'svelte', 'preact', 'qwik', 'solid'],
+  communityFrameworks: ['ember', 'html', 'svelte', 'preact', 'qwik', 'solid', 'marko'],
   featureGroups: [
     {
       name: 'Essentials',

diff --git a/docs/get-started/install.md b/docs/get-started/install.md
@@ -105,6 +105,7 @@ Below are some of the most common installation issues and instructions on how to
    'get-started/installation-problems/web-components.mdx',
    'get-started/installation-problems/qwik.mdx',
    'get-started/installation-problems/solid.mdx',
+   'get-started/installation-problems/marko.mdx',
   ]}
 />
 
@@ -126,7 +127,7 @@ Now that you have successfully installed Storybook and understood how it works,
 
 </IfRenderer>
 
-<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'svelte', 'preact', 'qwik','solid' ]}>
+<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'svelte', 'preact', 'qwik', 'solid', 'marko' ]}>
 
 Now that you installed Storybook successfully, let’s take a look at a story that was written for us.
 

diff --git a/docs/get-started/installation-problems/marko.mdx b/docs/get-started/installation-problems/marko.mdx
@@ -0,0 +1,11 @@
+- Add the `--type marko` flag to the installation command to set up Storybook manually:
+
+  ```shell
+  npx storybook init --type marko
+  ```
+
+- Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example:
+
+  ```shell
+  npx storybook init --package-manager=npm
+  ```