tabulator how to import as es module? - tabulator

I am trying to use tabulator in svelte. But it seems tabulator does not expose package type as module in package.json file. Because of that, we cannot import tabulator_esm as module.
When I try to import that as module, I get error from vite like Unexpected token export. Though there is other way to import like await import('tabulator-tables');.
Should not this option (`"type": "module") be in package.json?


You can import Tabulator using the standard esm import sytanx, because the Tabulator library exports its core functionality seperate from its modules, you need to make sure you import the bits of the library you need:
To get the basic Tabulator core functionality:
import {Tabulator} from 'tabulator-tables';
To get the basic Tabulator core functionality with specific modules:
import {Tabulator, FormatModule, EditModule} from 'tabulator-tables';
Tabulator.registerModule([FormatModule, EditModule]);
To get full tabulator with all modules installed (this will be a much bigger source file):
import {TabulatorFull as Tabulator} from 'tabulator-tables';

Related

Unable to import IDropdownOption when not using TypeScript

Having a project here not using TypeScript and trying to implement a Dropdown.
But I fail importing the Dropdown Option. Like documented in https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
import { Dropdown, DropdownMenuItemType, IDropdownStyles, IDropdownOption } from '#fluentui/react/lib/Dropdown';
It cannot find the IDropdownOption export. It does not exist in the JS file, but in the TypeScript file.
Does that mean TypeScript is mandatory?
Thanks for any hints

How to obtain ES6 module of React and ReactDOM?

I am not intending to use WebPack bundled js file, instead, to import React ES6 modules natively in ES6 way.
Here's the typical code in JSX, or TSX, or just ES6.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
So, I investigated ./node_modules/react and react-dom.
There are 2 directories named cjs and umd, and each contain react.development.js and react.production.min.js.
Fair enough, so investigating files,
cjs is for CommonJS module.exports /require module.
umd is Universal Module Definition, and looks like to be used via Babel plugin transform-es2015-modules-umd.
In either files, they are not ES6 modules, and to me it's very awkward situation not to be able to find module files for:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
How to obtain ES6 module of React and ReactDOM??
Is there any method to generate ES6 modules using a tool in the eco of Babel or even TypeScript?
Thanks.

2021-04-11 update:
https://github.com/facebook/react/issues/11503#issuecomment-662647468 is an update from 2020-07-22 from Dan Abramov that mentions the new https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html. With the new transform, there is a lot less reason to import the default export of React.
Actual first party React ESM being distributed might happen after React 17 drops.
In addition to cleaning up unused imports, this will also help you prepare for a future major version of React (not React 17) which will support ES Modules and not have a default export.
Older answer
On November 9th, 2017 Dan Abramov said:
Currently we only ship CommonJS versions of all packages. However we might want to ship them as ESM in the future (#10021).
We can't quite easily do this because we haven't really decided on what top-level ES exports would look like from each package. For example, does react have a bunch of named exports, but also a default export called React? Should we encourage people to import * for better tree shaking? What about react-test-renderer/shallow that currently exports a class (and thus would start failing in Node were it converted to be a default export)?
The issue referenced above is a request for what you're asking for from June 21, 2017.

Here is a fairly simple, but hacky, solution while we wait for an official React ESM. Use the umd modules which ship with the npm package of React and ReactDOM. Wrap the umd modules in the following way:
React
let g = {}
let w = (function(){
// Standard umd module code goes here
}).bind(g)
w()
export default g.React
ReactDOM
import React from './react'
let g = {React: React}
let w = (function(){
// Standard umd module code goes here
}).bind(g)
w()
export default g.ReactDOM
You may need to modify the the ./react import path to work with what your server expects.

How to create node.js module proper to VS Code intellisense

I coded all js classes according to ES6 and added all JSDoc comments using with eslint.
I created index.js file for the module which exports necessary classes of node module.
After linking(npm link) the module and import the classes from other node application I can't see the class files.
Would you write if there is a proper way to create, export modules and import them in order to see every types, properties etc in VS Code intellisense?
Should I generate .d.ts file and import it somehow in VS Code to see them in intellisense?

Importing Typescript modules in renderer

I'm attempting to import Typescript classes in the renderer process of Electron.
The issue I have is that I cannot use the "import" keyword in the Renderer process. This is because I can't use commonJS as the module importer on the client side, only the server side.
I am at a loss for how I can import these classes that I've exported.
I made a gist trying to explain https://gist.github.com/kvikende/0fb762e38fc0d1bfe1aebf786fd2ca59
Tldr: import keyword fails with "Uncaught ReferenceError: exports is not defined". Using const dataset = require("./dataset"); doesnt actually import my exported classes.
What am I missing?

When I'm writing a module that will be used both on the client and the server, I use the module flag to compile the module in UMD format:
tsc --module umd app.ts
You can then use standard imports:
import * as MyModule from './MyModule';
And they will work with both commonjs and AMD module loaders (for example, you could use require.js in your browser).

Force ghc to import a hidden module

I needed some functions out of a hidden module. If I import Graphics.UI.Gtk.Types I recieve:
Could not find module `Graphics.UI.Gtk.Types'
it is a hidden module in the package `gtk-0.12.4'
How can I import this hidden module without editing and recompiling gtk?

No you can not expose modules that are not exported by a package. If you need something from that module to use the package then the functionality should be available via another (exposed) module.

Resources