Develop Reference

Syntax to import a d3 module using webpack

I am trying to import and use a d3 module. My project uses webpack.
The function in the module (https://github.com/d3/d3-plugins/blob/master/hive/hive.js) is declared like this:
d3.hive.link = function() {
I read the following to try and get the import working: https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/ but I can't seem to crack the correct syntax to both import and call the link function.
Some of the variations I have tried are:
import {link as hiveLink} from 'd3-hive';
import {hive as hiveLink} from 'd3-hive';
import * as hiveLink from 'd3-hive';
Can someone point me at the correct import syntax?

The plugin you want to import is not an ES6 module. It is not compatible with D3 v4 (see README.md). So it just modifies your global d3 variable. While the article you referenced is about D3 v4 it does not work that way.
I think it is ok to import d3 library (version 3) which will initialize your global d3:
import * as d3 from 'd3';
and after that import that plugin which will add hive object into d3:
import 'd3-hive';

What does import * do in Javascript?

I was browsing through this repo on Github and was trying to comprehend the working of the code
Here, the author (or programmer) have mentioned import * at multiple places so I am trying to comprehend and understand how import * work?
First in Game.js file of his repo he have mentioned/written like this
import * as actions from '../actions';
In VS Code, when if I click on '../actions using command It is redirecting me to this file -> index.js
then in Index.js they have something like this
import * as ActionTypes from './action-types';
when I click on ./action-types it redirects me to here action-types.js
I went through firefox docs but I wasn't able to clearly make sense for the first example like for one, the action folder contains multiple files and how does import * as actions from '../actions'; mean index.js file
While i get he have called/referenced the functions using actions.functionName() or ActionType.TypeName
My Prime question remains
how does import * as actions from '../actions'; mean index.js file ?

The import * as name syntax imports all exported content of a javascript file.
For example, if you want to import an entire module's contents, then access the doAllTheAmazingThings() function
import * as myModule from '/modules/my-module.js';
myModule.doAllTheAmazingThings();
From the docs

Import in js is new syntax of ES6 to import a module it has the same work of require but its easier to filter what do you want in a module
In your example you import * as actions from '../actions'; you import all function from ../actions file
its same to do const actions = require('../actions')
but its easier to manage what you want
this syntax is not work on all browser so be sure to use transpiler with babel or other
you can see this syntax in python too

When you reference a directory in an import statement, it looks and loads the index.js file in that directory. What I usually do there is export classes and functions under that directory in a grouped object, so they can be easily accessed:
For instance in index.js I export sth like:
{
Class1,
method1
}
where each is imported as such:
import Class1 from './Class1';
So they just group the classes/methods/... that are in files in the directory.
Then you can easily access it as such:
import { Class1, method1 } from './mymodule';
vs
import Class1 from './mymodule/Class1';

How to get values from a JSP and inject them into the Angular 5 component (main.ts)

In a specific project framework, we use WCM Jahia to integrate our Angular 5 modules to display them in the various pages of the site.
The WCM jahia properties that we must recover to integrate them and use them in our modules Angular 5, it consists in recovering a list of key/value of some data.
We managed to code this solution for the moment, and it works (Except on IE9):
file_name.jsp
<script type="text/javascript" src="...../dist/polyfills.bundle.js"> </script>
<script type="text/javascript" src="...../dist/vendor.bundle.js"> </script>
<script type="text/javascript" src="...../dist/main.bundle.js"> </script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var myProperties = {
//For example
codes: "codes",
labels: "labels"
};
window.run(myProperties);
});
</script>
<app-myApp></app-myApp>
main.ts
window['run'] = (myProperties) => {
platformBrowserDynamic([
{
provide: 'myProperties',
useValue: myProperties
},
...
])
.bootstrapModule(AppModule)
.catch(err => console.log(err));
};
The problem is that this solution does not work if we use IE9 (We don't get to bootstrap the Angular 5 application) because of window['run']...
The question is, is there another way to retrieve a list of variable/value form a JAHIA Jsp and inject it into the provide before bootstrapModule Angular?

After some research and a few drops of sweat, the solution is finally found.
This consists of just uncommenting a part of the polyfills.ts file that relates to the IE9, IE10 and IE11 browsers.
polyfills.ts
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
I hope this can help someone in the same case.

How to import with ECMAScript (vanilla javascript) with modules es6

I read this post and i want use D3.js (v4+) using only import statement like this:
import { selection } from '../node modules/d3/build/d3.js';
But, because code output is UMD (or read this) and can't import because some globals is no defined, and ES6 can't resolve absolutive names in node_modules for example and vanilla don't suport import statement without extension like this:
import * as someFeature from './myAwesomeModule';
And this is pattern to import modules and each day is growing up like you see here.
How i can use import statement without any plugin today?

You can import d3 like this:
import * as d3 from 'd3';
See more here: https://github.com/d3/d3/blob/master/README.md#installing

How to write import statement instead of require statement in Javascript?

I was importing one of the polyfill, "es6-promise" in my jsx file of react application but was not able to import it in a correct way.
I googled N number of solution finally one worked for IE.
require('es6-promise').polyfill()
its working fine but, why it was not working for import es6-promise from "es6-promise";
Is there any way to import it first in a variable and then calling the .polyfill() method to that variable?

There a multiple ways of how you can import other modules in your code: import
For example:
import * as ES6Promise from 'es6-promise';
ES6Promise.polyfill();

Just a couple more ways you can do it.
import { polyfill } from 'es6-promise';
polyfill();
or
import ES6Promise from 'es6-promise';
ES6Promise.polyfill();