TL;DR: The documented way to import d3 into es6 modules fails. What is the correct way to do this? My guess is the documentation assumes I use a workflow that resolves these problems
Details:
The readme for d3 4.x says:
D3 is written using ES2015 modules. Create a custom bundle using Rollup, Webpack, or your preferred bundler. To import D3 into an ES2015 application, either import specific symbols from specific D3 modules:
import {scaleLinear} from "d3-scale";
Or import everything into a namespace (here, d3):
import * as d3 from "d3";
Yet when I yarn add d3 and use a es6 script tag, this fails to work:
<html>
<head>
<title>D3</title>
</head>
<body>
<script type="module">
import * as d3 from "./node_modules/d3"
</script>
</body>
</html>
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
Replacing the import with:
import * as d3 from "./node_modules/d3/index.js"
..gives this error:
Uncaught TypeError: Failed to resolve module specifier 'd3-array'
#jimmont is correct: importing the module form of d3 packages does not work without local building due to the "bare" imports. These can be resolved by the CDN's D3 uses, in particular unpkg.com. Here's the story.
It turns out d3 uses package.json to allow it to export two formats from a single source, npm itself. To do so, it uses the module: field.
The easiest way to access either all of d3, or a submodule/repo (there are 30 of them!) unpkg is ideal:
A dashboard to the repo: https://unpkg.com/d3/
The current umd/iife: https://unpkg.com/d3
The current collection of all modules: https://unpkg.com/d3?module
To import all of d3:
import * as d3 from 'https://unpkg.com/d3?module'
To import sub-modules:
import * as selection from 'https://unpkg.com/d3-selection?module'
es6 and es2015 modules will not work with d3 because d3 has chosen to use rollup instead. You are seeing this error because the module cannot be resolved as specified in the file "./node_modules/d3/index.js" which has lines like export {default as ascending} from "./src/ascending"; which are missing the real file name which ends with '.js'. So in other words all these entries are mis-configured to not support native modules in browsers or Nodejs.
you can either use rollup or make all the text substitutions yourself using a script or manually. I use a perl one-liner because I dislike rollup and the extra dependencies were breaking between node 8 and node 10. it is unbelievably strange that this is necessary but I also haven't been supporting a kitchen sink of module loaders.
import * as d3 from "./node_modules/d3-something/index.js"
which has content like export {default as something} from './src/thing'. because these files do not use the natively supported syntax with a full relative path (it's missing the actual file extension), it won't work without rollup or whatever making these corrections. multiple popular projects have made this same decision to require extra modules to work properly and forego native support.
see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
I am using a javascript library that uses CustomEvent that doesnt seem to be fully supported in Android 4.1. So I thought I'd use Modernizer to conditionally load a CustomEvent polyfill in browsers where it is missing.
I went here: https://modernizr.com/download?customevent-dontmin
Selected 'CustomeEvent',
Downloaded the suggested EventListner.js polyfill,
Pressed 'Build' and downloaded the custom Modernizer.
I added to my index.html: <script src="js/modernizr-custom.js"></script>
And added this to my javascript:
Modernizr.load({
test: Modernizr.customevent,
nope: 'EventListener.js'
});
But I get an error: TypeError: Modernizr.load is not a function
Can someone please confirm I've not gone completely off piste here and I'm using modernizer correctly? And do I have to download another script or something to get the Modernizer.load function? (Modernizer seems to have changed since similar questions were asked).
Modernizr.load was removed from Modernizr
Modernizr.load has been deprecated in favor of using yepnope.js directly; from v3.0, yepnope.js must be included in the page in order for Modernizr.load to work: calling .load() will simply pass the arguments on to yepnope(); this will be removed fully in a future release (#1241)
I am trying to add underscore to my mean.io application. I'm not sure where to link the js library to the page as it doesn't have a main html page like the Angular generator does.
I manually added it via the config/assets.json file and it works however the dev server keeps crashing saying _ is undefined (even though the web app uses the _ function ok and returns the data just before the dev server stops).
I asume I must be doing this wrong.
What is the correct way to add custom js libraries to a mean.io project?
In your package app.js file add
<your package>.aggregateAsset('js', '../<path_to_js_lib in "public/assets" folder>',{
absolute: false
});
For some REST APIs written in PHP, I was asked to create Swagger documentation, and since I was not aware of any easy way of annotating those existing APIs and create such a documentation, I used this editor to generate some for now.
I saved the JSON and YAML files created using that editor, and now I need to create the "interactive" Swagger documentation from there.
Can someone please let me know how I can convert the Swagger JSON specification file to an actual Swagger documentation?
I am on the Windows platform and do not know anything about Ant/Maven.
Try to use redoc-cli.
I was using bootprint-openapi by which I was generating a bunch of files (bundle.js, bundle.js.map, index.html, main.css and main.css.map) and then you can convert it into a single .html file using html-inline to generate a simple index.html file.
Then I found redoc-cli very easy to to use and output is really-2 awesome, a single and beautiful index.html file.
Installation:
npm install -g redoc-cli
Usage:
redoc-cli bundle -o index.html swagger.json
I was not satisfied with swagger-codegen when I was looking for a tool to do this, so I wrote my own. Have a look at bootprint-swagger
The main goal compared to swagger-codegen is to provide an easy setup (though you'll need nodejs).
And it should be easy to adapt styling and templates to your own needs, which is a core functionality of the bootprint-project
Everything was too difficult or badly documented so I solved this with a simple script swagger-yaml-to-html.py, which works like this
python swagger-yaml-to-html.py < /path/to/api.yaml > doc.html
This is for YAML but modifying it to work with JSON is also trivial.
I spent a lot of time and tried a lot of different solutions - in the end I did it this way :
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swagger-ui-dist#3.17.0/swagger-ui.css">
<script src="//unpkg.com/swagger-ui-dist#3/swagger-ui-bundle.js"></script>
<script>
function render() {
var ui = SwaggerUIBundle({
url: `path/to/my/swagger.yaml`,
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIBundle.SwaggerUIStandalonePreset
]
});
}
</script>
</head>
<body onload="render()">
<div id="swagger-ui"></div>
</body>
</html>
You just need to have path/to/my/swagger.yaml served from the same location.
(or use CORS headers)
Check out pretty-swag
It has
Similar looking as Swagger-Editor's right panel
Search / Filter
Schema Folding
Live Feedback
Output as a single html file
I was looking at Swagger Editor and thought it could export the preview pane but turned out it cannot. So I wrote my own version of it.
Full Disclosure: I am the author of the tool.
See the swagger-api/swagger-codegen project on GitHub ; the project README shows how to use it to generate static HTML. See Generating static html api documentation.
If you want to view the swagger.json you can install the Swagger UI and run it. You just deploy it on a web server (the dist folder after you clone the repo from GitHub) and view the Swagger UI in your browser. It's a JavaScript app.
You can also download swagger ui from: https://github.com/swagger-api/swagger-ui,
take the dist folder, modify index.html:
change the constructor
const ui = SwaggerUIBundle({
url: ...,
into
const ui = SwaggerUIBundle({
spec: YOUR_JSON,
now the dist folder contains all what you need and can be distributed as is
For Swagger API 3.0, generating Html2 client code from online Swagger Editor works great for me!
Give a look at this link : http://zircote.com/swagger-php/installation.html
Download phar file https://github.com/zircote/swagger-php/blob/master/swagger.phar
Install Composer https://getcomposer.org/download/
Make composer.json
Clone swagger-php/library
Clone swagger-ui/library
Make Resource and Model php classes for the API
Execute the PHP file to generate the json
Give path of json in api-doc.json
Give path of api-doc.json in index.php inside swagger-ui dist folder
If you need another help please feel free to ask.
There's a small Java program which generates docs (adoc or md) from a yaml file.
Swagger2MarkupConfig config = new Swagger2MarkupConfigBuilder()
.withMarkupLanguage(MarkupLanguage.ASCIIDOC)
.withSwaggerMarkupLanguage(MarkupLanguage.ASCIIDOC)
.withOutputLanguage(Language.DE)
.build();
Swagger2MarkupConverter builder = Swagger2MarkupConverter.from(yamlFileAsString).withConfig(config).build();
return builder.toFileWithoutExtension(outFile);
Unfortunately it only supports OpenAPI 2.0 but not OpenAPI 3.0.
If you commit your JSON file in Gitlab, it will render it for you.
Redocly's CLI interface has a tool to build HTML docs from OpenAPI spec files.
sudo npm i -g #redocly/cli
redocly build-docs my-swagger.yml -o docs.html
I'm not sure why, though getting a similar issue.
Trying to load in a font from fonts.com with webfontloader so I can call functions after they're loaded.
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
monotype: {
projectId: 'xxxxxxxxxxxxxxxxxxxx'
},
active: function() {
mainNav();
}
});
But when ever I include it WITH the jsapi
<script src="https://www.google.com/jsapi"></script>
I get the following issue in the console:
Uncaught TypeError: Cannot call method 'hasAttribute' of null
Yet if loaded in separately, they're fine...
Any ideas?
Try using the following url to load the webfonts api:
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.1.2/webfont.js"></script>
Check the following post for more details: https://groups.google.com/forum/#!msg/google-ajax-search-api/dWVzQF_YWCM/Y3-R738wh78J
We no longer support partial version aliases for new versions of
libraries. Any partial version aliases already in place will continue
to be supported and updated. The reason is that URLs like
https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js
which is saying "give me the most recent version of jquery 1.x.x) have
very short cache lifetimes since the most recent version can change at
any time. This is bad for performance. This is also bad for your web
site, in the event that a library makes breaking changes in its APIs
between versions that cause your page to suddenly render differently.
Libraries do not usually make such changes intentionally but pages
sometimes depend on behavior of an unspecified corner case of an API
that may be changed intentionally or inadvertently as the library is
updated.
So we strongly recommend that you specify the complete version string
when referencing libraries hosted on the Google AJAX APIs. You can
always find the most recent version at
https://developers.google.com/speed/libraries/devguide. In this case,
the most recent 1.9.x version is currently 1.9.1 so we suggest using
the URL
https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js
to get a stable version and better caching.
(Also, your example above doesn't have a closing </script> tag. Just want to verify this doesn't exist in your own code).