I found this answer, but I am not able to solve the issue with it.
The component I trying to load in Storybook depends on a global variable that is injected via a CDN in index.html.
To access the variable in the component I added this comment at the top of the file
/*global <variable name>*/
It's working fine in the React app, but Storybook throwing this error: <variable name> is not defined.
I tried adding that comment at the top of the stories.js file and at the top of the config file. - no luck.
The URL for the CDN is in an env file. From looking at this doc I tried adding a second script in the HTML file with an env variable that is prepended with STORYBOOK_. That didn't work either.
Any ideas on what I can do to get past this?
I've solved this by adding custom head tags: https://storybook.js.org/docs/configurations/add-custom-head-tags/#docs-content
Then adding my global variables there, for example:
// preview-head.html
<script>
var foo = bar
</script>
Related
I've added Snowpack 3 to my application and it works for JS/TS files as well as directly imported stylus files.
The file structure is similar to the following:
view.js:
import 'view-styles.styl'
export default function view() {
return (
<div className='example-view'>Hello World</div>
);
}
view-styles.styl
#require './colors.styl'
.example-view
background-color: $mainColor
colors.styl
$mainColor = #ff0000
The LiveReload/HMR works as expected when changing the directly imported stylus file. It does not work when changing anything in the colors.styl file. Changes in this file are only picked up once the view-styles.styl file is updated.
Is this a known limitation of Snowpack?
I would also be ok to trigger the update manually, as I have a way to identify these files using their filenames. I haven't found a way yet to trigger live reloads using Snowpack's JavaScript API. I was able to load the file using the SnowpackDevServer.loadUrl function, but that doesn't help either.
I was able to contribute this to the snowpack stylus plugin. The change was already integrated into the plugin: https://github.com/fansenze/snowpack-plugin-stylus
I'm in the process of migrating to webpack using typescript and I have some script dynamically generated into my index.html like so
<script>(function(modules) { code inside ... })</script>
How would I import code (pretty straight compiled typescript to javasript code) from this script into my main.ts file (the entry point)? For example
import whateverFunction from 'index.html'
Of course that doesn't work but I would love to see the right way to implement it. Thanks in advance.
If you defined a variable on index.html and you want to use it in typescript you need to do this:
declare var prod: boolean;
declare var version: string;
export class whateverName{
}
you should use the same name that used in index.html file.
I tried intgrating angular-slidezilla into a web site, but the slider elements do not show.
Observations:
I copied the .js file into the /lib folder and the .css into the /css folder.
the site uses requirejs; I added the source file into the requirements list.
I added the css as a stylesheet link next to the other css files in the index.html file.
To test, I copied the demo page (the entire part) into my HTML page and added $scope.slider1.val etc. variables to the AngularJS controller object. I also added a function which periodically changes the value of the scope variables.
When I deploy the site and load the page, I see the values changing every second (these are shown as text near the sliders). But the sliders themselves do not show.
"Inspect element" function shows a generated piece of DOM (div objects related to the slider), but the slider itself has size 0px*0px.
No errors in javascript console.
Can anyone give me a hint how to investigate further?
Found the solution. The javascript code in angular-slidezilla.js was never executed. As a result the widgets were not initialized and remained in their initial hidden state.
I needed to edit one line of javascript code to get it working:
// app.js
var app = angular.module("app", ['ui.bootstrap', ..., 'angular-slidezilla']);
In html file, the order of script files are included as jsx files and then js files as,
<script src="global.jsx" type="text/jsx"></script>
<script src="app.js" type="text/javascript"></script>
In global.jsx, the code is,
var abc = {ab: 1, ba: 2}
console.log("from jsx file " + abc)
In app.js, the code is,
console.log("from js file " + abc)
In browser app.js prints error, then global.jsx prints the variable value as:::
app.js -----> ReferenceError: abc is not defined
global.jsx -----> from jsx file [Object object]
How does the browser run the code in reverse, even though in html file, jsx is loaded first and then js is loaded?
And how can one declare browser globals inside jsx file and make it available for other js/jsx files?
You should precompile your file, global.jsx into a JavaScript file rather than relying on the transpiler feature if you want to be assured of a particular script loading behavior.
As your global.jsx file isn't compiled until a later step (when the JSX transpiler loads and finds all script tags with type="text/jsx"), it's actually being compiled and executed as JavaScript after the app.js file has already executed.
There are other somewhat hacky workarounds, but I'd suggest precompilation and possibly relying on a bundling system so that all of the JavaScript is loaded at one time (and all of the dependencies will be loaded in the correct order).
From what I can find on the internet the behavior is that browser loads the javascript files first that may be required for rendering any react components. So I guess that is an expected behavior. I can confirm that the reverse i.e., setting the value of abc in js and accessing from jsx works. I could not find many work arounds for this though.
Although this can be used I am guessing. The original purpose is to load heavy scripts lazily. Ideally I guess you would have to use js -> jsx binding.
I have this template:
<template name="sample">
<h1>Sample</h1>
</template>
Inside a Meteor app I can add this to body this way (as a partial):
{{> sample}}
It works. I've even tested to call Template.sample(); inside browser console and it works.
When I move this inside my package (i.e. a sample.html file inside my package folder) the template seems to disappear: I get Template.sample() is not a function whenever I call the function and I am not even able to render it as a partial.
I have a package.js with this code (and obviously the package is correctly loaded inside my app through packages file in .meteor):
Package.on_use(function (api) {
api.add_files(['sample.html', 'sample.js'], 'client');
});
Why this doesn't work?
How can I append a (reactive) Template to body from my package?
Solved! Add this line:
api.use(['templating'], 'client');
it is also important to include the html file before the js
api.add_files("client/sampleTemplate.html", "client");
api.add_files("client/sampleTemplate.js", "client");
Include in file packages.js of package
before
api.use('meteor-platform');
api.use('ui');`
after
first ".html" files, after ".js" files
api.addFiles('filename.html','client');
api.addFiles('filename.js','client');`