ttypescript-browser-like-import-transformer

A custom transformer that can be used with ttypescript to transform ts imports to browser style imports

Project maintained by Jack-Works Hosted on GitHub Pages — Theme by mattgraham

Home > config > PluginConfigs > jsonImport

PluginConfigs.jsonImport property

JSON import

Signature:

jsonImport?: 'data' | 'inline' | true

Remarks

Resolve the JSON import.

Not recommend because this is not a Web standard yet.

Only open it when your codebase is not easy to migrate from Node specified behaviors.

**Important**: if you want to keep JSON identity between different files, please use “data” mode.

**Important**: if your environment use CSP and bans data URL, please use “inline” mode.

undefined: disable this feature
true: same as “inline”
“data”: import it as a data url.
“inline”: import it as a inline object.

Example

true / “inline”

Source:

Filename: json-import-auto/tsconfig.json

{
    "compilerOptions": {
        "esModuleInterop": true,
        "module": "ESNext",
        "plugins": [
            {
                "transform": "@magic-works/ttypescript-browser-like-import-transformer",
                "jsonImport": true
            }
        ],
        "resolveJsonModule": true,
        "moduleResolution": "Node",
        "rootDir": "./"
    }
}

Filename: json-import-auto/index.ts

import * as file from './file.json'
import file2 from './file.json'
import { json as b } from './file.json'
console.log('ns import', file)
console.log('default import', file2)
console.log('named import', b)
import('./file.json').then((x) => console.log('Deterministic dynamic import', x))
import(`./file${''}.json`).then((x) => console.log('Nondeterministic dynamic import', x))

Filename: json-import-auto/import-failed.ts

// @ts-ignore
import x from './not-found.json'
// @ts-ignore
import y from 'https://raw.githubusercontent.com/angular/angular-cli/master/packages/angular/cli/lib/config/schema.json'
console.log(x, y)

Filename: json-import-auto/dyn-import-failed.ts

// @ts-ignore
import('./not-found.json').then(console.log, console.error)
// @ts-ignore
import('https://raw.githubusercontent.com/angular/angular-cli/master/packages/angular/cli/lib/config/schema.json').then(
    console.log,
    console.error,
)

Output:

Filename: json-import-auto/index.js

const file = JSON.parse("{\n    \"json\": true\n}\n");
const file2 = __esModuleInterop(JSON.parse("{\n    \"json\": true\n}\n")).default;
const { json: b } = JSON.parse("{\n    \"json\": true\n}\n");
console.log('ns import', file);
console.log('default import', file2);
console.log('named import', b);
Promise.resolve(JSON.parse("{\n    \"json\": true\n}\n")).then((x) => console.log('Deterministic dynamic import', x));
__dynamicImportTransform(`./file${''}.json`, JSON.parse("{\"jsonImport\":true}"), __dynamicImportNative, __UMDBindCheck, moduleSpecifierTransform).then((x) => console.log('Nondeterministic dynamic import', x));
function __dynamicImportNative(path, json) {
    if (json)
        return dynamicImportWithJSONHelper(json, import.meta);
    return import(path);
    function dynamicImportWithJSONHelper(json, meta) {
        const url = new URL(json, meta.url).toString();
        return fetch(url).then((x) => x.ok ? x.text() : Promise.reject(new TypeError(`Failed to fetch dynamically imported module: ${url}`))).then(JSON.parse);
    }
}
import { __esModuleInterop as __esModuleInterop, __dynamicImportTransform as __dynamicImportTransform, __UMDBindCheck as __UMDBindCheck, moduleSpecifierTransform as moduleSpecifierTransform } from "https://cdn.jsdelivr.net/npm/@magic-works/ttypescript-browser-like-import-transformer@2.1.2/es/ttsclib.min.js";

Filename: json-import-auto/import-failed.js

// @ts-ignore
import x from './not-found.json';
// @ts-ignore
import y from 'https://raw.githubusercontent.com/angular/angular-cli/master/packages/angular/cli/lib/config/schema.json';
console.log(x, y);

Filename: json-import-auto/dyn-import-failed.js

// @ts-ignore
__dynamicImportTransform('./not-found.json', JSON.parse("{\"jsonImport\":true}"), __dynamicImportNative, __UMDBindCheck, moduleSpecifierTransform).then(console.log, console.error);
// @ts-ignore
__dynamicImportTransform('https://raw.githubusercontent.com/angular/angular-cli/master/packages/angular/cli/lib/config/schema.json', JSON.parse("{\"jsonImport\":true}"), __dynamicImportNative, __UMDBindCheck, moduleSpecifierTransform).then(console.log, console.error);
// @ts-ignore
function __dynamicImportNative(path, json) {
    if (json)
        return dynamicImportWithJSONHelper(json, import.meta);
    return import(path);
    function dynamicImportWithJSONHelper(json, meta) {
        const url = new URL(json, meta.url).toString();
        return fetch(url).then((x) => x.ok ? x.text() : Promise.reject(new TypeError(`Failed to fetch dynamically imported module: ${url}`))).then(JSON.parse);
    }
}
import { __dynamicImportTransform as __dynamicImportTransform, __UMDBindCheck as __UMDBindCheck, moduleSpecifierTransform as moduleSpecifierTransform } from "https://cdn.jsdelivr.net/npm/@magic-works/ttypescript-browser-like-import-transformer@2.1.2/es/ttsclib.min.js";

“data”

Source:

Filename: json-import-data/index.ts

import * as file from './file.json'
import file2 from './file.json'
import { json as b } from './file.json'
console.log('ns import', file)
console.log('default import', file2)
console.log('named import', b)
import('./file.json').then((x) => console.log('Deterministic dynamic import', x))
import(`./file${''}.json`).then((x) => console.log('Nondeterministic dynamic import', x))

Filename: json-import-data/import-failed.ts

// @ts-ignore
import x from './not-found.json'
// @ts-ignore
import y from 'https://raw.githubusercontent.com/angular/angular-cli/master/packages/angular/cli/lib/config/schema.json'
console.log(x, y)

Filename: json-import-data/dyn-import-failed.ts

// @ts-ignore
import('./not-found.json').then(console.log, console.error)
// @ts-ignore
import('https://raw.githubusercontent.com/angular/angular-cli/master/packages/angular/cli/lib/config/schema.json').then(
    console.log,
    console.error,
)

Output:

Filename: json-import-data/index.js

import * as file from "data:text/javascript,export default JSON.parse(\"{\\n    \\\"json\\\": true\\n}\\n\")";
import file2 from "data:text/javascript,export default JSON.parse(\"{\\n    \\\"json\\\": true\\n}\\n\")";
import { json as b } from "data:text/javascript,export default JSON.parse(\"{\\n    \\\"json\\\": true\\n}\\n\")";
console.log('ns import', file);
console.log('default import', file2);
console.log('named import', b);
import("data:text/javascript,export default JSON.parse(\"{\\n    \\\"json\\\": true\\n}\\n\")").then((x) => console.log('Deterministic dynamic import', x));
__dynamicImportTransform(`./file${''}.json`, JSON.parse("{\"jsonImport\":\"data\"}"), __dynamicImportNative, __UMDBindCheck, moduleSpecifierTransform).then((x) => console.log('Nondeterministic dynamic import', x));
function __dynamicImportNative(path, json) {
    if (json)
        return dynamicImportWithJSONHelper(json, import.meta);
    return import(path);
    function dynamicImportWithJSONHelper(json, meta) {
        const url = new URL(json, meta.url).toString();
        return fetch(url).then((x) => x.ok ? x.text() : Promise.reject(new TypeError(`Failed to fetch dynamically imported module: ${url}`))).then(JSON.parse);
    }
}
import { __dynamicImportTransform as __dynamicImportTransform, __UMDBindCheck as __UMDBindCheck, moduleSpecifierTransform as moduleSpecifierTransform } from "https://cdn.jsdelivr.net/npm/@magic-works/ttypescript-browser-like-import-transformer@2.1.2/es/ttsclib.min.js";

Filename: json-import-data/import-failed.js

// @ts-ignore
import x from './not-found.json';
// @ts-ignore
import y from 'https://raw.githubusercontent.com/angular/angular-cli/master/packages/angular/cli/lib/config/schema.json';
console.log(x, y);

Filename: json-import-data/dyn-import-failed.js

// @ts-ignore
__dynamicImportTransform('./not-found.json', JSON.parse("{\"jsonImport\":\"data\"}"), __dynamicImportNative, __UMDBindCheck, moduleSpecifierTransform).then(console.log, console.error);
// @ts-ignore
__dynamicImportTransform('https://raw.githubusercontent.com/angular/angular-cli/master/packages/angular/cli/lib/config/schema.json', JSON.parse("{\"jsonImport\":\"data\"}"), __dynamicImportNative, __UMDBindCheck, moduleSpecifierTransform).then(console.log, console.error);
// @ts-ignore
function __dynamicImportNative(path, json) {
    if (json)
        return dynamicImportWithJSONHelper(json, import.meta);
    return import(path);
    function dynamicImportWithJSONHelper(json, meta) {
        const url = new URL(json, meta.url).toString();
        return fetch(url).then((x) => x.ok ? x.text() : Promise.reject(new TypeError(`Failed to fetch dynamically imported module: ${url}`))).then(JSON.parse);
    }
}
import { __dynamicImportTransform as __dynamicImportTransform, __UMDBindCheck as __UMDBindCheck, moduleSpecifierTransform as moduleSpecifierTransform } from "https://cdn.jsdelivr.net/npm/@magic-works/ttypescript-browser-like-import-transformer@2.1.2/es/ttsclib.min.js";