Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Addon for Storybook v7.0 #6

Open
wants to merge 2 commits into
base: next
Choose a base branch
from
Open

Update Addon for Storybook v7.0 #6

wants to merge 2 commits into from
+38 −23

Conversation

fgaleano
Copy link

@fgaleano fgaleano commented Mar 9, 2023 •
edited by shilman
Loading

Closes storybookjs/storybook#20366

Updating dependencies to test support for Storybook v7.

@fgaleano
Add support for Google Analytics v4
24fb888
@fgaleano
WIP - Support for Storybook v7. SB is not running/building at this ti…
f4b0393 
…me, need to figure out how to pass arguments to ESBUILD to deal with importing the "global" object in the existing code.
@socket-security
Copy link

Socket Security Pull Request Report

Dependency issues detected: If you merge this pull request, you will not be alerted to the instances of these issues again.

📜 Install scripts

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead.

Package Script field Source
[email protected] (upgraded) postinstall package.json via @storybook/[email protected]
[email protected] (added) postinstall package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
😵‍💫 Bin script confusion

This package has multiple bin scripts with the same name. This can cause non-deterministic behavior when installing or could be a sign of a supply chain attack

Consider removing one of the conflicting packages. Packages should only export bin scripts with their name

Package Bin script Source
[email protected] (added) semver package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
@storybook/[email protected] (added) sb package.json via [email protected]
[email protected] (added) sb package.json
⚠️ Uses eval

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Avoid packages that use eval, since this could potentially execute any code.

Package Eval Type Location Source
@sinclair/[email protected] (added) Function compiler/compiler.js package.json via @storybook/[email protected]
@sinclair/[email protected] (added) Function errors/errors.js package.json via @storybook/[email protected]
@sinclair/[email protected] (added) Function value/cast.js package.json via @storybook/[email protected]
@sinclair/[email protected] (added) Function value/check.js package.json via @storybook/[email protected]
@sinclair/[email protected] (added) Function value/create.js package.json via @storybook/[email protected]
@storybook/[email protected] (upgraded) Function dist/formatter-MGIGMU7Y.mjs package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (upgraded) Function dist/formatter-MGIGMU7Y.mjs package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (added) Function dist/chunk-PLFN7PS7.mjs package.json via [email protected]
@storybook/[email protected] (added) Function dist/chunk-PLFN7PS7.mjs package.json via [email protected]
@storybook/[email protected] (added) Function dist/chunk-PLFN7PS7.mjs package.json via [email protected]
@storybook/[email protected] (added) Function dist/chunk-PLFN7PS7.mjs package.json via [email protected]
@storybook/[email protected] (added) Function dist/chunk-PLFN7PS7.mjs package.json via [email protected]
@storybook/[email protected] (added) Function dist/chunk-PLFN7PS7.mjs package.json via [email protected]
@storybook/[email protected] (added) Function dist/chunk-PLFN7PS7.mjs package.json via [email protected]
@storybook/[email protected] (added) Function dist/formatter-MGIGMU7Y-BT45LDVJ.mjs package.json via [email protected]
@storybook/[email protected] (added) Function dist/formatter-MGIGMU7Y-BT45LDVJ.mjs package.json via [email protected]
[email protected] (added) Function dist/ajv.bundle.js package.json via @storybook/[email protected], [email protected]
[email protected] (added) Function lib/compile/index.js package.json via @storybook/[email protected], [email protected]
[email protected] (added) Function internals/async-iterator-prototype.js
[email protected] (added) Function internals/function-bind.js
[email protected] (added) Function internals/task.js
[email protected] (added) Function modules/web.timers.js
[email protected] (upgraded) Function internals/async-iterator-prototype.js package.json via @storybook/[email protected]
[email protected] (upgraded) Function index.js package.json via [email protected]
[email protected] (added) Function ejs-v3.1.8/ejs.js package.json via [email protected]
[email protected] (added) Function ejs-v3.1.8/ejs.js package.json via [email protected]
[email protected] (added) Function ejs-v3.1.8/ejs.min.js package.json via [email protected]
[email protected] (added) Function ejs-v3.1.8/ejs.min.js package.json via [email protected]
[email protected] (added) Function ejs-v3.1.8/lib/ejs.js package.json via [email protected]
[email protected] (added) Function ejs-v3.1.8/lib/ejs.js package.json via [email protected]
[email protected] (added) Function dist/envinfo.js package.json via [email protected]
[email protected] (added) Function dist/envinfo.js package.json via [email protected]
[email protected] (added) Function dist/node.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function dist/cjs/handlebars/compiler/javascript-compiler.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function dist/cjs/handlebars/compiler/javascript-compiler.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function dist/handlebars.amd.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function dist/handlebars.amd.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function dist/handlebars.amd.min.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function dist/handlebars.amd.min.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (upgraded) Function test/index.js package.json via @storybook/[email protected], [email protected]
[email protected] (upgraded) Function test/index.js package.json via @storybook/[email protected], [email protected]
[email protected] (added) Function index.js package.json via [email protected]
[email protected] (added) Function dist/js-yaml.js package.json via @storybook/[email protected]
[email protected] (added) Function dist/js-yaml.js package.json via @storybook/[email protected]
[email protected] (added) Function lib/js-yaml/type/js/function.js package.json via @storybook/[email protected]
[email protected] (added) Function lib/js-yaml/type/js/function.js package.json via @storybook/[email protected]
[email protected] (added) Function _root.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected], [email protected]
[email protected] (added) Function template.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected], [email protected]
[email protected] (added) Function test/bigint.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function test/bigint.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function test/bigint.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function cli.js package.json via [email protected]
[email protected] (added) Function build/plugins/AsymmetricMatcher.js package.json via @storybook/[email protected]
[email protected] (added) Function build/plugins/ReactTestComponent.js package.json via @storybook/[email protected]
[email protected] (added) Function lib/Browser.js package.json via [email protected]
[email protected] (added) Function lib/DOMWorld.js package.json via [email protected]
[email protected] (added) Function lib/ExecutionContext.js package.json via [email protected]
[email protected] (added) Function lib/ExecutionContext.js package.json via [email protected]
[email protected] (upgraded) Function dist/index.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (upgraded) Function dist/index.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (upgraded) Function dist/index.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (upgraded) Function dist/index.mjs package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (upgraded) Function dist/index.mjs package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (upgraded) Function dist/index.mjs package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function tools/node.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function bin.js package.json via @storybook/[email protected]
[email protected] (added) Function bin.js package.json via @storybook/[email protected]
@storybook/[email protected] (added) eval dist/index.js package.json via @storybook/[email protected]
@storybook/[email protected] (added) eval dist/index.mjs package.json via @storybook/[email protected]
@storybook/[email protected] (upgraded) eval dist/core-PJ7T6LD2.mjs package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (upgraded) eval dist/OverlayScrollbars-VAV6LJAB.mjs package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (added) eval dist/chunk-PLFN7PS7.mjs package.json via [email protected]
@storybook/[email protected] (added) eval dist/chunk-PLFN7PS7.mjs package.json via [email protected]
@storybook/[email protected] (added) eval dist/chunk-PLFN7PS7.mjs package.json via [email protected]
@storybook/[email protected] (added) eval dist/chunk-PLFN7PS7.mjs package.json via [email protected]
@storybook/[email protected] (added) eval dist/OverlayScrollbars-VAV6LJAB-ZCK6WCDR.mjs package.json via [email protected]
[email protected] (added) eval dist/docs/assets/js/main.js package.json via [email protected]
[email protected] (added) eval dist/docs/assets/js/main.js package.json via [email protected]
[email protected] (added) eval lib/RedisConnection.js package.json via [email protected]
[email protected] (upgraded) eval index.js package.json via @babel/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (upgraded) eval dist/index.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (upgraded) eval dist/index.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (upgraded) eval dist/index.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (upgraded) eval dist/index.mjs package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (upgraded) eval dist/index.mjs package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (upgraded) eval dist/index.mjs package.json via @storybook/[email protected], [@storybook/[email protected]](https://socket.dev/npm/package/@storybook/

@fgaleano
Copy link
Author

fgaleano commented Mar 9, 2023 •
edited
Loading

This PR has some issues but I'm submitting hoping I can get some help.

The code to register the addon makes use of the global object by importing it as if it was a dependency. I believe this is the standard use case when in Node environments.

The problem is the bundler is not finding it in the local dependencies so it fails to run or build Storybook.

The bundler in use for those two steps seems to be ESBUILD, not Webpack. Attempting to deal with this problem using standard Storybook's Webpack configuration made no difference. I'm attaching the error below.

Is it possible to pass arguments to ESBUILD via the Storybook CLI? Or am I approaching this the wrong way?

✘ [ERROR] Could not resolve "global"

    dist/register.js:3:22:
      3 │ var _global = require("global");
        ╵                       ~~~~~~~~

  You can mark the path "global" as external to exclude it from the bundle, which will remove this
  error. You can also surround this "require" call with a try/catch block to handle this failure at
  run-time instead of bundle-time.

ERR! Error: Build failed with 1 error:
ERR! dist/register.js:3:22: ERROR: Could not resolve "global"
ERR!     at failureErrorWithLog (/Users/username/code/addon-google-analytics/node_modules/esbuild/lib/main.js:1604:15)
ERR!     at /Users/username/code/addon-google-analytics/node_modules/esbuild/lib/main.js:1056:28
ERR!     at runOnEndCallbacks (/Users/username/code/addon-google-analytics/node_modules/esbuild/lib/main.js:1476:61)
ERR!     at buildResponseToResult (/Users/username/code/addon-google-analytics/node_modules/esbuild/lib/main.js:1054:7)
ERR!     at /Users/username/code/addon-google-analytics/node_modules/esbuild/lib/main.js:1166:14
ERR!     at responseCallbacks.<computed> (/Users/username/code/addon-google-analytics/node_modules/esbuild/lib/main.js:70

@jonniebigodes
Copy link

@fgaleano, thanks for putting this pull request together and having it support Storybook 7.0. We're extremely thankful for it 🙏 ! I will reach out to the Storybook team and see how they can unblock you on getting this one merged and released. It goes without saying this could take some time as the team is getting geared up for the upcoming Storybook release and probably won't be able to commit too much time. Sorry for the inconvenience on this. I hope you understand.

Hope you have a great weekend.

Stay safe

cc @shilman, @ndelangen , @yannbf

@ndelangen
Copy link
Member

@vanessayuenn do we put this on the 7.0 burndown chart somewhere?

@vanessayuenn vanessayuenn mentioned this pull request Mar 28, 2023
Closed
14 tasks
@ndelangen
Copy link
Member

We had a meeting with the team and decided the best way forwards for this storybook team would be to push this out of the storybook organization.

@fgaleano as @jonniebigodes already mentioned we're very glad with the assistance here; but no-one on the storybook team uses this addon, plus it's usage is waning, thus we decided to focus our efforts/time/energy elsewhere.

I'll spend a little time trying to solve the issue above, but we won't be making a new release of this package.
Instead, we'll deprecate this repo, and ask that someone who is using this code, and cares about it maintenance will release a fork.

We'll be happy to redirect users to the fork in the README, afterwards.

@ndelangen
Copy link
Member

I tried pulling your branch, but it's not using TSup/Esbuild at all...

@fgaleano
Copy link
Author

@ndelangen Thanks for the update. I'll be on the lookout for the deprecation announcement. I may or may not use my fork to publish the independent version. Out of curiosity, what is the Storybook team using for analytics? Or is analytics not really an area of focus?

As for the issue I reported, if you try to run or build Storybook from the branch, you should get the same error I shared above. The stack trace says its coming from ESBuild. Doesn't Storybook use ESBuilt internally? If you're not getting the error, let me know. Thanks.

@ndelangen
Copy link
Member

@fgaleano I understand the confusion now. I ran yarn build in the addon repo, and it was (still) using babel to create dist.

https://github.com/storybookjs/addon-kit (the template of this repo) has been updated to use TSup + ESbuild.
I think if this was done, the runtime problem will go away.

what is the Storybook team using for analytics

We don't track any events in the browser for any storybook we own.
Just stating the obvious: we also don't track any events in the browser of any storybooks we don't own.

@yannbf yannbf mentioned this pull request Mar 31, 2023
Open
32 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@ndelangen ndelangen

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

addon-google-analytics: not compatible with Storybook 7 beta
3 participants
@fgaleano @jonniebigodes @ndelangen