We Keep Coding

Load only highlight.js library using TypeScript, not default with all languages loaded

As the official highlight.js usage document suggests:
The default import imports all languages! Therefore it is likely to be more efficient to import only the library and the languages you need:
import hljs from 'highlight.js/lib/highlight';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);
I am trying to load just the highlight.js library, along with individual language modules so as to reduce my footprint for my TS app.
Using the #types/highlight.js declarations file, the only way (that I can find) to import highlight.js is like this:
import * as hljs from 'highlight.js';
Unfortunately, that loads the default export, which has all of the shipped languages loaded.
Looking into the highlight.js module, I want to do something like this:
import * as hljs from 'highlight.js/lib/highlight.js';
import * xml from 'highlight.js/lib/languages/xml';
...
hljs.registerLanguage('xml', xml);
so I only get the library itself, along with the only language I need (xml).
So far, I've been able to add these lines in a .d.ts file to get TypeScript to not complain about these imports:
declare module 'highlight.js/lib/highlight';
declare module 'highlight.js/lib/language/xml';
But of course, that means I lose my content assist when importing hljs. I could duplicate the content of #types/highlight.js into my own .d.ts file, but I'd really like to avoid that.
Is there any way to I can proxy the declarations from #types/highlight.js onto the module highlight.js/lib/highlight'? Or maybe some other approach I'm missing.
Thanks in advance.

I solved this problem by creating a Javascript file that requires only the languages I need:
myhighlight.js
var hljs = require('../../../node_modules/highlight.js/lib/highlight');
hljs.registerLanguage('typescript', require('../../../node_modules/highlight.js/lib/languages/typescript'));
hljs.registerLanguage('json', require('../../../node_modules/highlight.js/lib/languages/json'));
module.exports = hljs;
And by importing this file in my Typescript code:
import hljs from './myhighlight';
export class SomeClass {
highlight(code: string) {
return hljs.highlightAuto(code).value;
}
}

Just include the types by adding this line in the top of one of your *.d.ts files (e.g., global.d.ts)
/// <reference types="highlight.js/types/index.d.ts" />

Import classes from a Javascript library to Typescript

I am trying to import an external JavaScript library with no typings or installable package. The plugin is: https://github.com/amw/jpeg_camera/tree/master/dist/jpeg_camera_no_flash.js. I want to import three classes from that plugin: JpegCamera, JpegCameraHTML5 and Snapshot. With the help of some tutorials, I was able to export the three classes with their interfaces in a .d.ts file. The .d.ts file looks something like:.
declare module Camera {}
export class JpegCamera {...}
export class JpegCameraHTML5 {...}
export class Snapshot {...}
Now, I don't know how to create a link between the plugin source file (.js), my own .d.ts file and the typescript file where I want to import these three classes. I tried
import * as X from "path/to/d.ts
but it won't work. Thanks :)

I don't know in which context you are running your application, but trying locally I got the message: ReferenceError: document is not defined loading with the syntax:
import * as camera from './jpeg_camera_no_flash'
You should not have this message if you are running your script through a browser.
I downloaded the file physically to my project folder.

You could try doing this:
/// <reference path="path to the .d.ts" />
Or you could export each class using default, so you can import them like this: import className from './file-path'

ES6 imports using module names without path

I would like to be able to import my modules using just name without path.
For example, say I want to use:
import ViewportChecker from 'viewport-checker';
instead of
import ViewportChecker from '../ViewportChecker';
But I want to keep the file where it is and not create a new npm module of it. Would it be possible to define it as module for exmaple in package.json?

You can use webpack's alias feature : https://webpack.js.org/configuration/resolve/#resolve-alias

You can put a default file with naming convention of index.js which contains all the exports.
like:
-App
--home
---index.js // <--it will hold all the exports from otherClass.js and anotherClass.js
---otherClass.js
---anotherClass.js
Now you have to import just folder name and it will automatically search for index.js file to get the particular exported item.
It might look like this:
import Home from './home';

What does import Module from 'module' import when no default export is defined and why is it different from import * as Module?

I am pretty new to JavaScript and have been struggling with imports recently. There has been one thing I cannot wrap my head around.
In older node modules (mostly those which came to see the light prior to ES6), which may be installed using the npm, such as express, usually no default export is defined.
My IDE (WebStorm) marks the following line with the Default export is not declared in the imported module notification.
import express from 'express';
This message may be circumvented by trying to import the whole module as an alias using
import * as express from 'express';
implicitly telling my IDE to just import everything and name it express, however doing so then leads to an express is not a function error when trying to instantiate the application on the following line.
const app = express();
Peculiarly the original import (without the alias) works.
What exactly is imported using the import statement without the alias, when no default export is defined? I would think it is the whole module, but it does not seems so.

What does import Module from 'module' import when no default export is defined?
Nothing. In fact, instantiating the module will throw a SyntaxError when something is imported that is not exported or exported multiple times from the imported module.
Why is it different from import * as Module?
Because import * just imports a module namespace object that has the exports as properties. If you don't export anything, it'll be an empty object.
In older, pre-ES6 node modules usually no default export is defined.
Which means that you cannot import them as an ES6 module. Your IDE seems to expect that though and puts up the warning.
So what happens if you refer to them in an import declaration? Your module loader might do anything with it, and HostResolveImportedModule will return a module record that is not an source text "ES6 module" record - i.e. it might do anything implementation-dependent with CommonJS modules.

How do I create a main import file in ES6?

I am looking to create a main import file using ES6 syntax. I have a components directory with an index.js file.
I would like to export the imports if that makes sense. Essentially, I would like to import then export the individual component files into the index file so I can de-structure my imports from any other files like so:
import {Comp1, Comp2} from "./components"
How do I do this with ES6 syntax?

You can do:
export * from "./components"
// or
export {Comp1, Comp2} from "./components"
How exactly to reference components/index.js depends on your module loader or the module format you're compiling to. I'm not sure what happens if you do export * from multiple modules that have overlapping named exports (will have to check).