{"_id":"@degjs/storybook-decorator-script-runner","_rev":"5-512711edfdca2b64bd974468e15ed2ea","name":"@degjs/storybook-decorator-script-runner","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.0":{"name":"@degjs/storybook-decorator-script-runner","version":"1.0.0","description":"A Storybook for HTML decorator for running JavaScript on stories","main":"index.js","scripts":{"test":"jest"},"repository":{"type":"git","url":"git+https://github.com/DEGJS/storybook-decorator-script-runner.git"},"keywords":["storybook","javascript","html"],"author":{"name":"Ryan Heap","email":"heaper@gmail.com"},"license":"ISC","bugs":{"url":"https://github.com/DEGJS/storybook-decorator-script-runner/issues"},"homepage":"https://github.com/DEGJS/storybook-decorator-script-runner#readme","publishConfig":{"access":"public"},"dependencies":{"@storybook/addons":"^5.3.19","@storybook/core-events":"^5.3.19"},"devDependencies":{"@babel/preset-env":"^7.11.0","babel-jest":"^26.2.2","jest":"^26.2.2"},"gitHead":"694cdd848621325aaf5bbddf57a0abff133b5090","_id":"@degjs/storybook-decorator-script-runner@1.0.0","_nodeVersion":"12.14.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-A7I5flkHMZrzQvhZ7i/Nw51bIKt7yV3xRSl/XPqKYuOVjgHCMH4qGFurM3cdRS3iuiliUePfEmZsvi9zU57nIA==","shasum":"d894cea54498b54470d60aa737d9a6c7fa3c9df8","tarball":"https://registry.npmjs.org/@degjs/storybook-decorator-script-runner/-/storybook-decorator-script-runner-1.0.0.tgz","fileCount":6,"unpackedSize":14448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaf/CRA9TVsSAnZWagAAea8P/0asd9fPEJXzNPRr1PhI\n6Qdo70Gn/cwhJuxD3ArrVGfVw55bUvoeEifukM+6mClLfHu7ih62DA5L2fBP\nzDam0Q+vIcdY06AchJj0WpKewzFV/fPJ9MWY57VC7St99Y1GJEVE712rOh0G\nFRM5HbtXsVsRMsDh/kEwgiMcZVihD2WQY1PKMjI+ZgkSrf+tBKTJZMja+qYR\nYOvPyzpW6iVGk1rmWLh7mRg4QfQ2J6NAZYUFeuxGFQc1jxf/jD98XctV4ZG8\nYVIiYmn7ujXjAfO1S1UB6ZurNcfCRL/kRUmx5n9VjAWhig4qdw6XxOjy/Ts4\n0qZE9Ji4iKOVAXFYlGRhnRHNgtW0Qn8BO+988dSDki1X1Cxul9ReJZcRBfHE\n6eyd5u+/PElFTJ5+5vQGlvjcBo/X/OHcCR9bV4XChoAiXZUrzz7aLMZMW3xk\nv4SurmgPEA/+6uddAJ3ofNPcnIEuvqUmeOSaCU+l+WqG+nTqIZqog8B0EPZn\ndDHLQ8VkOeQexxHFDI4SXxIsXdv392x3/ZbdQE/kuuxs93Ww4peqdFgLZOon\nI3WWSqaP0QW1FXiArCJTAvuoOE1KGaQX6Ji7tGbGD/LlF+0HBzyZc5nDyJQj\nj3cjGAKn9akPgYKh4VptUUj2osRe3YFdQxfp7jKYhGdnQPYqZ4gsrfb5UNDp\nuVu5\r\n=MDL5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDcUO0AmJPl7fPw2lRQkdWnC5/WDn8LBlRmWGHbB6Ct5AiBuy6Y0TgGk2AFdWOvSfb1cnqfNYCojcE/WuNs2gVFYeg=="}]},"maintainers":[{"name":"alejcerro","email":"alejcerro@gmail.com"},{"name":"kylegeary","email":"kgeary09@gmail.com"},{"name":"scheul93","email":"scheul93@gmail.com"},{"name":"heaper","email":"heaper@gmail.com"},{"name":"briangraves","email":"mail@brianleegraves.com"},{"name":"aladage","email":"aladage@gmail.com"},{"name":"jsmapr1","email":"jsmapr1@gmail.com"},{"name":"jlawhorn","email":"jlawhorn@degdigital.com"},{"name":"designbykhalid","email":"khalid@designbykhalid.com"}],"_npmUser":{"name":"heaper","email":"heaper@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-decorator-script-runner_1.0.0_1596827646746_0.5569656616579803"},"_hasShrinkwrap":false},"2.0.0":{"name":"@degjs/storybook-decorator-script-runner","version":"2.0.0","description":"A Storybook for HTML decorator for running JavaScript on stories","main":"index.js","scripts":{"test":"jest"},"repository":{"type":"git","url":"git+https://github.com/DEGJS/storybook-decorator-script-runner.git"},"keywords":["storybook","javascript","html"],"author":{"name":"Ryan Heap","email":"heaper@gmail.com"},"license":"ISC","bugs":{"url":"https://github.com/DEGJS/storybook-decorator-script-runner/issues"},"homepage":"https://github.com/DEGJS/storybook-decorator-script-runner#readme","publishConfig":{"access":"public"},"dependencies":{"@storybook/addons":"^6.0.18","@storybook/core-events":"^6.0.18"},"devDependencies":{"@babel/preset-env":"^7.11.0","babel-jest":"^26.2.2","jest":"^26.2.2"},"gitHead":"4e5f77f019833005ea48b6b3aa57046a6678df4e","_id":"@degjs/storybook-decorator-script-runner@2.0.0","_nodeVersion":"12.14.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-F8WgLQSi/D2ggHTrEFiJ5T73teoZ4wekTnfy8Gp31swDJZzgNOuxUQdzN/vOCYql/JCqJCsTfkNTrdxeTbiRBQ==","shasum":"0c801655112872340f3d63aeda88cbe3858fbee9","tarball":"https://registry.npmjs.org/@degjs/storybook-decorator-script-runner/-/storybook-decorator-script-runner-2.0.0.tgz","fileCount":6,"unpackedSize":14448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRX2xCRA9TVsSAnZWagAAp30QAIgN3lQt3AGXjWzv0OiH\nSwQa5nMwF8n2+r00l/Eijt0JfW6Z0UWSWzDUaz2XMVlxTeIJc+FYkgDtQpqi\n26GjRks5/weCAQFEVP74vnM5KliH6mRyOXGlm+fXP3vSAbCvhYlv/x39z78e\nDCxo/l7lxkyCux3WAlz4CSILxLLqCq7qcsIVNzECwMrygIMMZ4Ug/9Y4Oi/L\nbzPAxUVGbsr5rITyCiIcF5XOKtQQJv2TVCjVyNNaavXfR+ql9jxT+y1pV2GX\nK8jAN7Zg9p9SLGHSfq9M7HT89BQAmzEKWbAXRuLGlkJ7YLeaE5hEolldC8RT\nixBnO8nC6EfKwedCKhgQWgPKxRDp2l8ptxiURYL4Nxrw0HVmx0TfgHpCqFQR\nzHD4DQ9wIvsdOJ2rpyJhzYYKZWsay28kwdWIFyjnwxTh3Vz9/fzEb/OaNjN3\nZYSpOhMrgPrAzqBA+MOAN7pVJ6ze40ZZ2vrnJdCSmgUixgUUg+45w5pWsJzF\n9jyeCpdwTM4MJI619rp7Z9JiFZCM9c4bkuhnJ85b7+Iwihi4PoHr2PYnWb3U\nay29uCmWyt4lXsZ/LuVf605Z5OUPqARYVhOxGrx1aEY8FK7WWivfsFr5tzPA\n0o49ewOZZNX1c2It4JwLUelsOluq87HkeaWKBavW04kMRBPuSoswpmPEvz1H\nh2D2\r\n=CXOG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDhnXXX74SoBCmx30gcThcIGDDe+ngj4yppmrBhpMoomAiEA59K0wihPKyDlazeGPjBQ9HIRwMGYmUHE5wHp+GQmacg="}]},"maintainers":[{"name":"aladage","email":"aladage@gmail.com"},{"name":"alejcerro","email":"alejcerro@gmail.com"},{"name":"briangraves","email":"mail@brianleegraves.com"},{"name":"designbykhalid","email":"khalid@designbykhalid.com"},{"name":"heaper","email":"heaper@gmail.com"},{"name":"jlawhorn","email":"jlawhorn@degdigital.com"},{"name":"jsmapr1","email":"jsmapr1@gmail.com"},{"name":"kylegeary","email":"kgeary09@gmail.com"},{"name":"scheul93","email":"scheul93@gmail.com"}],"_npmUser":{"name":"heaper","email":"heaper@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-decorator-script-runner_2.0.0_1598389680869_0.32485675046040696"},"_hasShrinkwrap":false}},"time":{"created":"2020-08-07T19:14:06.592Z","1.0.0":"2020-08-07T19:14:06.865Z","modified":"2022-04-05T03:39:29.158Z","2.0.0":"2020-08-25T21:08:00.971Z"},"maintainers":[{"email":"heaper@gmail.com","name":"heaper"},{"email":"mail@brianleegraves.com","name":"briangraves"},{"email":"aladage@gmail.com","name":"aladage"},{"email":"jlawhorn@degdigital.com","name":"jlawhorn"},{"email":"khalid@designbykhalid.com","name":"designbykhalid"},{"email":"alejcerro@gmail.com","name":"alejcerro"},{"email":"vequanclark@yahoo.com","name":"vequanc"}],"description":"A Storybook for HTML decorator for running JavaScript on stories","homepage":"https://github.com/DEGJS/storybook-decorator-script-runner#readme","keywords":["storybook","javascript","html"],"repository":{"type":"git","url":"git+https://github.com/DEGJS/storybook-decorator-script-runner.git"},"author":{"name":"Ryan Heap","email":"heaper@gmail.com"},"bugs":{"url":"https://github.com/DEGJS/storybook-decorator-script-runner/issues"},"license":"ISC","readme":"# storybook-decorator-script-runner\nA [Storybook for HTML](https://storybook.js.org/docs/guides/guide-html/) decorator that executes JavaScript modules once a story has rendered. This can be useful when JavaScript functionality is dependent on the fully-rendered DOM being available within a story.\n\n## Install\n```\nnpm install @degjs/storybook-decorator-script-runner\n```\n\n## Usage\nAs a global decorator in `.storybook/preview.js` (recommended):\n```js\nimport { addDecorator } from '@storybook/html';\nimport scriptRunner from '@degjs/storybook-decorator-script-runner';\nimport someGlobalModule from 'someGlobalModule';\nimport tabs from 'tabs`;\n\naddDecorator(scriptRunner({\n    globalModules: {\n        someGlobalModule\n    },\n    dynamicModules: {\n        tabs\n    }\n}));\n```\nAs a decorator within a story:\n```js\nimport scriptRunner from '@degjs/storybook-decorator-script-runner';\nimport tabs from 'tabs`;\n\nexport default {\n    title: 'Tabs',\n    decorators: [ scriptRunner ],\n    parameters: {\n        scripts: {\n            dynamicModules: {\n                tabs\n            }\n        }\n    }\n}\n```\n\n## Module Execution\nThe Script Runner decorator executes JavaScript modules after a story has finished rendering to the DOM. It does this by listening for the `STORY_RENDERED` Storybook event. JavaScript modules are expected to be executable functions.\n\n## Global and Dynamic Modules\nThe Script Runner decorator can execute two types of JavaScript modules: global and dynamic. \n\nA global module is JavaScript that should be executed for any story that the Script Runner decorator applies to. Global modules do not necessarily depend on the specific HTML content of a story.\n\nA dynamic module is JavaScript that should only be executed if a specific DOM element exists within the HTML of a story. The Script Runner decorator searches the story HTML for one or more elements that contain a specific data attribute (`data-module` by default) with a value that matches the name of the JavaScript module. If such an element is found, the module will be executed and the element will be passed as a function parameter. This is useful for dynamically executing JavaScript functionality for a component if the supporting HTML for the component exists within a story. \n\nThe example below will execute a Tabs JavaScript module for a story:\n```js\n/* .storybook/preview.js */\n\nimport { addDecorator } from '@storybook/html';\nimport scriptRunner from '@degjs/storybook-decorator-script-runner';\nimport tabs from 'tabs`;\n\naddDecorator(scriptRunner({\n    dynamicModules: {\n        tabs\n    }\n}));\n\n\n/* tabs/tabs.js */\n\nfunction tabs({containerElement}) {\n    /* Add tab functionality to the containerElement */\n}\n\nexport default tabs;\n\n\n/* tabs/tabs.stories.js */\n\nexport default {\n    title: 'Components/Tabs'\n};\n\n/* The value of the `data-module` HTML attribute matches the name of the tabs module in the dynamicModules object */\nexport const defaultTabs = () => '<div class=\"tabs\" data-module=\"tabs\">...</div>';\n```\n\n## Properties\n```js\nscriptRunner({\n    globalModules: <object>,\n    dynamicModules: <object>,\n    moduleAttrName: <string>\n});\n```\n\n### `globalModules: object`\nAn object containing global modules to execute when a story is rendered. The value of each property in the object should be a module, and each module must be a function.\n\n### `dynamicModules: object`\nAn object containing dynamic modules to execute when a story is rendered. A dynamic modules is only executed if a corresponding DOM element in the rendered story is found. The name of each property in the object should be a module name, and the value of each property in the object should be a module itself. Each module must be a function. When the function is executed, it will be passed the following object as a parameter containing the corresponding DOM element:\n```js\n{\n    containerElement: <element>\n}\n```\n\n### `moduleAttrName: string`\nThe name of a DOM element attribute containing the name of a dynamic module. This attribute links a DOM element to a dynamic module.  Default: `data-module`.","readmeFilename":"README.md"}