feat: use cache file to replace Symfony commands #47

jon-ht · 2025-02-08T02:43:38Z

Hi ! First thanks for this project, it looks very promising.

I'd like to use it in my projects, but I encountered some limitations.

When running npm run storybook / yarn storybook, it is expected to have a local PHP binary to run Symfony commands. I don't have PHP on my machine as our projects use Docker Compose.

Internal command can accept options

StorybookBundle/storybook/src/server/lib/symfony.ts

Lines 21 to 31 in 8c0ca89

    
           const prepareSymfonyCommand = (command: string, inputs: string[] = [], options: CommandOptions = {}) => { 
        
               const finalOptions = { 
        
                   ...defaultOptions, 
        
                   ...options, 
        
               }; 
        
               return [finalOptions.php, finalOptions.script, command] 
        
                   .concat([...inputs, '-v']) 
        
                   .map((part) => `'${part}'`) 
        
                   .join(' '); 
        
           };

But there is no way to provide custom PHP path nor use docker exec commands.

So here I am, with a proposal to not rely on PHP binary, and only use Symfony as we do every day : with cache files.

This PR aims to generate and use a file containing all configurations required by JS scripts. The file structure would be as follow

/path/to/app/var/cache/dev/storybook/symfony_parameters.json

{
  "kernel_project_dir": "\/path\/to\/app",
  "storybook_config": {
    "sandbox": {
      "allowedFunctions": [
        "dump"
      ],
      "allowedTags": [],
      "allowedFilters": [],
      "allowedProperties": [],
      "allowedMethods": []
    },
    "cache": "\/path\/to\/app\/var\/cache\/dev\/storybook\/twig"
  },
  "twig_config": {
    "file_name_pattern": [
      "*.twig"
    ],
    "default_path": "\/path\/to\/app\/templates",
    "globals": {
      "some_global": {
        "value": "foo"
      }
    },
    "form_themes": [
      "form_div_layout.html.twig"
    ],
    "autoescape_service": null,
    "autoescape_service_method": null,
    "cache": "\/path\/to\/app\/var\/cache\/dev\/twig",
    "charset": "UTF-8",
    "debug": true,
    "strict_variables": true,
    "date": {
      "format": "F j, Y H:i",
      "interval_format": "%d days",
      "timezone": null
    },
    "number_format": {
      "decimals": 0,
      "decimal_point": ".",
      "thousands_separator": ","
    }
  },
  "twig_component_config": {
    "defaults": {
      "Front\\Twig\\Components\\": {
        "template_directory": "components\/",
        "name_prefix": "Shared"
      }
    },
    "anonymous_template_directory": "components\/",
    "profiler": true,
    "controllers_json": null
  }
}

Every command providing a configuration in symfony.ts is now a distinct entry in this symfony_parameters.json (any better name would be accepted)

WDYT about this ? This is still a draft, and more code should be adjusted in order to remove symfony.ts file and all related processes

TODO

Remove remaining types/functions from symfony.ts based on command execution
Update symfony.test.ts
Remove GeneratePreviewCommand
Update docs
Update recipe for .storybook/main.ts

jon-ht · 2025-02-08T02:46:12Z

src/DependencyInjection/Compiler/CacheWarmerPass.php

+    private function getConfigForExtension(ExtensionInterface $extension, ContainerBuilder $container)
+    {
+        $extensionAlias = $extension->getAlias();
+
+        if (isset($this->extensionConfig[$extensionAlias])) {
+            return $this->extensionConfig[$extensionAlias];
+        }
+
+        $configs = $container->getExtensionConfig($extensionAlias);
+
+        $configuration = $extension instanceof ConfigurationInterface ? $extension : $extension->getConfiguration($configs, $container);
+
+        return $this->extensionConfig[$extensionAlias] = (new Processor())->processConfiguration($configuration, $configs);
+    }
+
+    private function getConfig(ContainerBuilder $container, ExtensionInterface $extension): array
+    {
+        return $container->resolveEnvPlaceholders(
+            $container->getParameterBag()->resolveValue(
+                $this->getConfigForExtension($extension, $container)
+            ), true
+        );
+    }


This process is based on debug:config command.

I'm not really sure about the implementation. It gives me expected output, but there could be other ways to achieve this. Let me know if it could be improved

jon-ht · 2025-02-15T00:43:24Z

src/Controller/StorybookPreviewController.php

+    public function __invoke(): Response
+    {
+        $this->eventDispatcher->dispatch(new GeneratePreviewEvent());
+
+        $content = $this->twig->render('@Storybook/preview.html.twig');
+
+        return new Response($content);
+    }


Same process as storybook:generate-preview. This command should be removed before merging

jon-ht · 2025-02-15T00:47:57Z

storybook/src/builders/webpack-builder.ts

+    projectDir?: string;
+    storybookCachePath?: string;


projectDir is now provided by main.js|ts file

storybookCachePath is the path var/cache folder of StorybookBundle. I need this because my project uses Single Kernel approach

Here is how I configured framework.options values

options: { // 👇 Here configure the framework symfony: { projectDir: path.resolve(__dirname, '..'), storybookCachePath: path.resolve(__dirname, '../var/cache/etu/dev/storybook'), server: 'https://www.myapp.lh:8005', proxyPaths: [ '/assets', ], additionalWatchPaths: [ 'assets', ] } },

jon-ht · 2025-02-15T00:52:44Z

storybook/src/server/lib/symfony.ts

+    const fetchUrl = new URL(`${server}/_storybook/preview`);

-type StorybookBundleConfig = {
-    storybook: {
-        runtime_dir: string;
-    };
+    const response = await fetch(fetchUrl, {
+        method: 'GET',
+        headers: {
+            Accept: 'text/html',
+        },
+    });


I'm having a hard time with this. My project runs in HTTPS with self signed certificate

Despite secure: false option in createProxyMiddleware, I get this error when running Storybook

front$ yarn storybook yarn run v1.22.22 $ sb dev -p 6006 --no-open --disable-telemetry @storybook/core v8.5.3 (node:33983) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead. (Use `node --trace-deprecation ...` to show where the warning was created) info => Starting manager.. WARN No story files found for the specified pattern: stories/**/*.mdx info => Starting preview.. [HPM] Proxy created: / -> https://www.myapp.lh:8005 [HPM] Subscribed to http-proxy events: [ 'error', 'close' ] [HPM] Proxy created: / -> https://www.myapp.lh:8005 [HPM] Subscribed to http-proxy events: [ 'error', 'close' ] [HPM] Proxy created: / -> https://www.myapp.lh:8005 [HPM] Subscribed to http-proxy events: [ 'error', 'close' ] info Addon-docs: using MDX3 info => Using implicit CSS loaders info => Using default Webpack5 setup <i> [webpack-dev-middleware] wait until bundle finished <e> [webpack-dev-middleware] TypeError: fetch failed <e> at node:internal/deps/undici/undici:13392:13 <e> at process.processTicksAndRejections (node:internal/process/task_queues:105:5) <e> at async base (/space/myapp/front/node_modules/@sensiolabs/storybook-symfony-webpack5/src/server/framework-preset.ts:93:11) <e> at async base (/space/myapp/front/node_modules/@sensiolabs/storybook-symfony-webpack5/src/server/framework-preset.ts:93:11) { <e> [cause]: Error: self-signed certificate <e> at TLSSocket.onConnectSecure (node:_tls_wrap:1679:34) <e> at TLSSocket.emit (node:events:518:28) <e> at TLSSocket._finishInit (node:_tls_wrap:1078:8) <e> at ssl.onhandshakedone (node:_tls_wrap:864:12) { <e> code: 'DEPTH_ZERO_SELF_SIGNED_CERT' <e> } <e> }

This would be the last piece for moving from PHP binary to cached files

Resolved by providing NODE_TLS_REJECT_UNAUTHORIZED=0 to storybook script

{ "scripts": { "storybook": "NODE_TLS_REJECT_UNAUTHORIZED=0 sb dev -p 6006 --no-open --disable-telemetry" } }

jon-ht · 2025-02-15T13:49:24Z

storybook/src/types.ts

+    /**
+     * When Storybook and Symfony are not on the same host (e.g. Symfony is Dockerized), mounted paths may differ.
+     * This option allows to map paths from Symfony host to Storybook host.
+     */
+    templatePathAliases?: {
+        [p: string]: string;
+    };


As my Symfony app is dockerized, my host path differs from mounted path

On machine: /path/to/project/front

On Docker images: /application/front

This allows me to have this

templatePathAliases: { [path.resolve(__dirname, '..')]: '/application/front', }

jon-ht · 2025-02-15T13:51:19Z

storybook/src/server/framework-preset.ts

+    const twigPaths: string[] = Object.keys(symfonyConfig.twig_config.paths).map((key) => {
+        if (key.startsWith(symfonyOptions.projectDir)) {
+            return `${key}/`;
+        }
+
+        return `${symfonyOptions.projectDir}/${key}/`;
+    });


I don't know if I misconfigured my Symfony app, but values from symfonyConfig.twig_config.paths already contains symfonyOptions.projectDir

Without this change, path is duplicated

Here is my twig.yaml

twig: file_name_pattern: '*.twig' default_path: '%kernel.project_dir%/templates' paths: '%kernel.project_dir%/templates': Shared

jon-ht · 2025-02-15T13:54:34Z

storybook/src/server/lib/TwigComponentResolver.ts

+        const resolvePathAlias = (file: string) => {
+            for (const [alias, resolvedPath] of Object.entries(this.templatePathAliases)) {
+                if (file.startsWith(alias)) {
+                    return file.replace(alias, resolvedPath);
+                }
+            }
+            return file;
+        }
+
+        const resolvedFile = resolvePathAlias(file);


Replace host path with Docker path

This must be adapted for additional watch paths

Ignoring additional watch path '/application/front/assets': path doesn't exists.

jon-ht · 2025-02-15T13:58:49Z

storybook/src/server/framework-preset.ts

    );

-    const runtimeDir = (await getBundleConfig()).runtime_dir;


Not sure about the usage of runtime_dir. I didn't find anything in source code

feat: use cache file to replace Symfony commands

4c5fb18

jon-ht force-pushed the feat-use-cache-file-to-replace-commands branch from db97903 to 4c5fb18 Compare February 8, 2025 02:46

jon-ht commented Feb 8, 2025

View reviewed changes

jon-ht mentioned this pull request Feb 14, 2025

Any idea how to launch this on docker where is no php executable? #49

Open

jon-ht commented Feb 15, 2025

View reviewed changes

fix: remove Symfony commands for configuration parameters

1c9fe90

jon-ht force-pushed the feat-use-cache-file-to-replace-commands branch from af6549d to 1c9fe90 Compare February 15, 2025 10:34

fix: add template path aliases for Dockerized apps

4e70c16

jon-ht commented Feb 15, 2025

View reviewed changes

jon-ht force-pushed the feat-use-cache-file-to-replace-commands branch from 9ae6e11 to dc17a81 Compare February 25, 2025 21:35

jon-ht marked this pull request as ready for review February 25, 2025 21:51

jon-ht force-pushed the feat-use-cache-file-to-replace-commands branch 2 times, most recently from 26e9f49 to c31f352 Compare February 25, 2025 22:27

jon-ht added 3 commits February 26, 2025 09:04

fix: unit tests

68b057f

fix: remove storybook:generate-preview command

46c537c

docs: update configuration reference

78eb6c2

jon-ht force-pushed the feat-use-cache-file-to-replace-commands branch from c31f352 to 78eb6c2 Compare February 26, 2025 08:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: use cache file to replace Symfony commands #47

feat: use cache file to replace Symfony commands #47

jon-ht commented Feb 8, 2025 •

edited

Loading

jon-ht Feb 8, 2025 •

edited

Loading

jon-ht Feb 15, 2025 •

edited

Loading

jon-ht Feb 15, 2025

jon-ht Feb 15, 2025

jon-ht Feb 15, 2025

jon-ht Feb 15, 2025

jon-ht Feb 15, 2025

jon-ht Feb 15, 2025

jon-ht Feb 15, 2025

	const prepareSymfonyCommand = (command: string, inputs: string[] = [], options: CommandOptions = {}) => {
	const finalOptions = {
	...defaultOptions,
	...options,
	};

	return [finalOptions.php, finalOptions.script, command]
	.concat([...inputs, '-v'])
	.map((part) => `'${part}'`)
	.join(' ');
	};

feat: use cache file to replace Symfony commands #47

Are you sure you want to change the base?

feat: use cache file to replace Symfony commands #47

Conversation

jon-ht commented Feb 8, 2025 • edited Loading

TODO

jon-ht Feb 8, 2025 • edited Loading

Choose a reason for hiding this comment

jon-ht Feb 15, 2025 • edited Loading

Choose a reason for hiding this comment

jon-ht Feb 15, 2025

Choose a reason for hiding this comment

jon-ht Feb 15, 2025

Choose a reason for hiding this comment

jon-ht Feb 15, 2025

Choose a reason for hiding this comment

jon-ht Feb 15, 2025

Choose a reason for hiding this comment

jon-ht Feb 15, 2025

Choose a reason for hiding this comment

jon-ht Feb 15, 2025

Choose a reason for hiding this comment

jon-ht Feb 15, 2025

Choose a reason for hiding this comment

jon-ht commented Feb 8, 2025 •

edited

Loading

jon-ht Feb 8, 2025 •

edited

Loading

jon-ht Feb 15, 2025 •

edited

Loading