Code injector addon to dynamically inject code in the iFrame #4152

nm123github · 2018-09-10T07:46:52Z

Issue: At this point i don't believe there is a way to add remove css resources dynamically in a running storybook instance. I think there might be use-cases where folks want to check if a component works fine in different versions of a css/js library.

What I did

GIF demo
There is still work to be done on this. Just wanted to get some preliminary comments/feedback. Also, it probably wont be trivial to swap in/out javascript versions so mostly this will probably work with just css (at-least to begin with).

Updated

Updated PR with new code and details below (in comments). Please ignore ^ initial details and demo.

Hypnosphi · 2018-09-22T10:46:31Z

Makes sense to me

Hypnosphi · 2018-09-22T10:49:06Z

Please add some docs on usage

Hypnosphi · 2018-09-22T10:54:21Z

addons/resources/src/ResourcePanel.js

+  }
+
+  static getDerivedStateFromProps(props) {
+    return { resources: props.resources };


it's called on every setState in React 16.4+. So state.resources will always be the same as props.resources

nm123github · 2018-09-22T17:36:04Z

Thanks @Hypnosphi, i'm probably going to change a lot in here. but thanks for the initial feedback.

ndelangen · 2018-10-13T13:53:30Z

Hey Nevilla, I know others are requesting a similar addon.

Think you'd have time to work on this more or share the work with someone else?

nm123github · 2018-10-13T18:18:10Z

Hey @ndelangen , let me try to finish or atleast get it to a point where someone else could take over 👍. Let me know if you have any deadlines as far as releases go..

ndelangen · 2018-10-13T23:21:35Z

No deadlines apply to new addons.

codecov · 2018-10-14T18:25:25Z

Codecov Report

Merging #4152 into next will decrease coverage by 0.35%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##             next    #4152      +/-   ##
==========================================
- Coverage   35.23%   34.88%   -0.36%     
==========================================
  Files         564      567       +3     
  Lines        6924     6994      +70     
  Branches      929      937       +8     
==========================================
  Hits         2440     2440              
- Misses       3992     4054      +62     
- Partials      492      500       +8

Impacted Files	Coverage Δ
addons/codeinjector/src/register.js	`0% <0%> (ø)`
addons/codeinjector/src/CodeinjectorPanel.js	`0% <0%> (ø)`
addons/codeinjector/register.js	`0% <0%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update cd02d36...a4fe2c7. Read the comment docs.

nm123github · 2018-10-20T20:55:45Z

Quick demo available here.
Allow users to add/remove scripts and css in the iframe at runtime 🏃
Allow users to add a default

addDecorator(
  withResources({
    resources: `<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"></link>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></link>`,
  })
);

Resources added/removed will be sticky (meaning they will persist across stories).
Resources added/removed via the add-on will not change any of the resources added statically (via preview-head.html).
Remember, in some cases (like adding event listeners on components) you might need to re-apply resources for the story!

igor-dv

Should be listed in

(Also readme is missing)

igor-dv · 2018-10-21T08:21:33Z

examples/official-storybook/stories/addon-resources.stories.js

+);
+
+storiesOf('Addons|Resources', module)
+  .add('Primary Large Button', myButton('Primary Large Button', 'btn btn-lg btn-primary'))


Why do you use this strange components syntax? I didn't see it in use in the other stories... I think we need to be consistent with the examples.

Changed to make it consistent with some of the other examples i see..

igor-dv · 2018-10-21T08:26:15Z

addons/resources/src/index.js

+  name: 'withResources',
+  parameterName: 'resources',
+  skipIfNoParametersOrOptions: true,
+  allowDeprecatedUsage: true,


probably not. changed.

probably not (& changed to false).

igor-dv · 2018-10-21T08:33:00Z

addons/resources/src/ResourcePanel.js

+import PropTypes from 'prop-types';
+import { Button } from '@storybook/components';
+import styled from '@emotion/styled';
+import AceEditor from 'react-ace';


Note for the future: I think we need to stick to a single editor in all these code highlighting components.

Storysource has now a react-syntax-highlighter which is not an editor thought,

Here it's an AceEditor

IMO @libetl is adding another one

We are not yet decided whether to add codemirror or monaco for the moment.
The change will probably happen in the tech/overhaul-ui branch

Sure, in future we can change it to whatever we decide on.

igor-dv · 2018-10-21T08:47:41Z

addons/resources/src/ResourcePanel.js

+          />
+        </div>
+        <div style={{ float: 'right', 'padding-top': '17px' }}>
+          <Button onClick={this.apply.bind(this)}>APPLY RESOURCES</Button>


I think we need to have a "Disable" button ? Looks like it's needed to delete everything from the editor to disable the resources.

igor-dv · 2018-10-21T08:50:59Z

addons/resources/src/ResourcePanel.js

+  loadResources() {
+    const { resources = `` } = this.state;
+
+    const addElements = (domElements, i) => {


Looks like this function could be extracted, it doesn't use any inner state from the loadResources func

igor-dv · 2018-10-22T11:31:35Z

ADDONS_SUPPORT.md

@@ -15,6 +15,7 @@
 |[links](addons/links)                       |+|+|+|+|+|+|+| |+|+|+|
 |[notes](addons/notes)                       |+|+*|+|+|+|+|+| |+|+|+|
 |[options](addons/options)                   |+|+|+|+|+|+|+| |+|+|+|
+|[resources](addons/resources)               |+|+|+|+|+|+|+|+|+|+|+|


I can assume that RN is not supported

igor-dv · 2018-10-23T07:58:36Z

@nm123github, you need to update the snapshots

igor-dv · 2018-10-23T22:56:59Z

IDK how but looks like svelteshots test is also broken =/

nm123github · 2018-10-24T05:47:05Z

Just had a brief chat with @shilman . This will go in 4.1 (so lets not merge for now).

ndelangen · 2018-10-24T07:06:07Z

Yeah that's what I feel is best. also.

Let's release 4.0.0 first.

igor-dv · 2018-11-13T12:24:41Z

@nm123github is anything missing here ?

…ources

nm123github · 2018-12-01T01:54:21Z

Adding css is probably a much more common use case which should be covered in the addon-cssresources. Also, looks like there's a PR being worked on to integrate monaco-editor so in anycase probably best to wait for that.

Maybe will resurrect this sometime in future if there's a need.

wildeyes · 2020-04-01T14:33:02Z

@nm123github what is the PR that integrates monaco-editor?

ndelangen · 2020-04-02T12:29:05Z

@playma256 has been working on a tiny lightweight story editor, but focus has shifted a bit. The storyState was changed for Args & my time was spend on the composition feature.

I'm sure we'll work on a true editor within storybook Q2.

The status is "on hold"

nm123github added feature request in progress ci: do not merge labels Sep 10, 2018

nm123github requested review from danielduan, Hypnosphi and usulpro as code owners September 10, 2018 07:46

Hypnosphi reviewed Sep 22, 2018

View reviewed changes

ndelangen self-assigned this Oct 14, 2018

ndelangen assigned nm123github and unassigned ndelangen Oct 14, 2018

nm123github removed ci: do not merge in progress labels Oct 20, 2018

igor-dv reviewed Oct 21, 2018

View reviewed changes

igor-dv reviewed Oct 22, 2018

View reviewed changes

ndelangen added this to the next milestone Oct 23, 2018

shilman added the ci: do not merge label Oct 24, 2018

nm123github changed the title ~~Resources addon to dynamically add/remove css~~ Code injector addon to dynamically inject code in the iFrame Oct 30, 2018

nm123github mentioned this pull request Oct 30, 2018

Resources addon to dynamically add/remove css #4622

Merged

Hypnosphi changed the base branch from master to next November 5, 2018 17:04

Neville Mehta added 3 commits November 24, 2018 12:03

Merge branch 'next' of github.com:storybooks/storybook into addon-res…

db60161

…ources

rename addon to codeinjector

53afdf1

Merge branch 'next' of github.com:storybooks/storybook into addon-res…

5ecdfee

…ources

nm123github requested review from ndelangen and tmeasday as code owners November 26, 2018 03:41

revert unrelated files

e55c6ad

nm123github removed the ci: do not merge label Nov 26, 2018

nm123github and others added 2 commits November 25, 2018 19:53

update README.md

021bde0

Fix snapshots

fbac0a9

nm123github requested review from dangreenisrael, theinterned and z4o4z as code owners November 26, 2018 07:26

igor-dv approved these changes Nov 26, 2018

View reviewed changes

Merge branch 'next' into addon-resources

a4fe2c7

nm123github closed this Dec 1, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Code injector addon to dynamically inject code in the iFrame #4152

Code injector addon to dynamically inject code in the iFrame #4152

nm123github commented Sep 10, 2018 •

edited

Hypnosphi commented Sep 22, 2018

Hypnosphi commented Sep 22, 2018

Hypnosphi Sep 22, 2018 •

edited

nm123github commented Sep 22, 2018

ndelangen commented Oct 13, 2018

nm123github commented Oct 13, 2018

ndelangen commented Oct 13, 2018

codecov bot commented Oct 14, 2018 •

edited

nm123github commented Oct 20, 2018 •

edited

igor-dv left a comment

igor-dv Oct 21, 2018

nm123github Oct 22, 2018

igor-dv Oct 21, 2018

nm123github Oct 22, 2018

nm123github Oct 22, 2018

nm123github Oct 22, 2018

igor-dv Oct 21, 2018

libetl Oct 22, 2018

nm123github Oct 22, 2018 •

edited

igor-dv Oct 21, 2018

nm123github Oct 22, 2018

igor-dv Oct 21, 2018

igor-dv Oct 22, 2018

nm123github Oct 22, 2018

igor-dv commented Oct 23, 2018

igor-dv commented Oct 23, 2018

nm123github commented Oct 24, 2018

ndelangen commented Oct 24, 2018

igor-dv commented Nov 13, 2018

nm123github commented Dec 1, 2018

wildeyes commented Apr 1, 2020

ndelangen commented Apr 2, 2020

Code injector addon to dynamically inject code in the iFrame #4152

Code injector addon to dynamically inject code in the iFrame #4152

Conversation

nm123github commented Sep 10, 2018 • edited

What I did

Updated

Hypnosphi commented Sep 22, 2018

Hypnosphi commented Sep 22, 2018

Hypnosphi Sep 22, 2018 • edited

Choose a reason for hiding this comment

nm123github commented Sep 22, 2018

ndelangen commented Oct 13, 2018

nm123github commented Oct 13, 2018

ndelangen commented Oct 13, 2018

codecov bot commented Oct 14, 2018 • edited

Codecov Report

nm123github commented Oct 20, 2018 • edited

igor-dv left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nm123github Oct 22, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

igor-dv commented Oct 23, 2018

igor-dv commented Oct 23, 2018

nm123github commented Oct 24, 2018

ndelangen commented Oct 24, 2018

igor-dv commented Nov 13, 2018

nm123github commented Dec 1, 2018

wildeyes commented Apr 1, 2020

ndelangen commented Apr 2, 2020

nm123github commented Sep 10, 2018 •

edited

Hypnosphi Sep 22, 2018 •

edited

codecov bot commented Oct 14, 2018 •

edited

nm123github commented Oct 20, 2018 •

edited

nm123github Oct 22, 2018 •

edited