I'm trying to import a JSON file on my Vite app, whose paths are dynamically generated. So the import path for this JSON includes variables.
I know it's possible to do it with require, but I'm working with Svelte, and I cant use requires.
You can use a dynamic import() statement for that. This will return a promise, which has to be awaited, though. E.g.
<script lang="ts">
import meta from './meta.json';
const filePromise = import(/* #vite-ignore */ `./${meta.file}.json`);
</script>
{#await filePromise then file}
{file.property}
{/await}
There are some limitations to dynamic imports in Vite so the application can be built properly. The #vite-ignore comment silences a warning output about these limitations.
Related
This may be a silly question but I really don't know where to look.
I'm creating a browser testing environment for a pretty large-scale API written in typescript. This API uses esbuild to build the typescript files into a /dist/ folder with a single index.js entry-point and its appropriate d.ts file.
I've created a /tests/ folder to hold some browser files that includes an index.html file with Mocha and Chai imported. It also imports /dist/index.js which is set globally to a window.myAPI variable.
In /tests/index.html:
import * as myAPI from "./dist/index.js"
Alongside index.html in the tests folder, there are separate JS files included for different tests that run things on window.myAPI... to do assertion tests.
search.test.js
book.test.js
navigate.test.js
I then run a server to host at the root. These separate tests are then imported from /tests/index.html. The separate tests look like this inside:
const { chai, mocha } = window;
const { assert } = chai;
describe("Search", function() {
describe("Setup", function() {
it("Setting URL should work", function() {
const call = myAPI.someCall()
assert.ok(call);
});
});
});
mocha.run();
Everything works, but I have no code hinting for myAPI. I'd like to be able to see what functions are available when I type myAPI, and what parameters they take, and what they should return - along with all my comments on each function.
In typescript you can do things like ambient declarations, but I don't want to make my tests typescript because then I add an unnecessary build step to the tests. But it would be as easy as:
/// <reference path = "/dist/index.d.ts" />
How can I tell VSCode that window.myAPI is an import of /dist/index.js and should import the types as well so I can see them ?
I'm open to different solutions to this, but I feel like this should be pretty simple. I don't know if ESLint is capable of doing something like this, but I tagged it because I feel it's relevant.
Thanks!
I have this simplified dart file using dart:js:
(dataLayer is used for Google tags, if that's any help)
#JS()
import 'package:js/js.dart';
#JS('dataLayer.push')
external void _push(data);
class Manager {
void pushEvent(String event) {
_push(event);
}
}
On the web, it runs correctly and the dataLayer object is being created in a script in the web/index.html file.
I am trying to write a test about it. I would like to verify dataLayer.push is being called with the correct parameters.
I run my test with the command
flutter test --platform chrome
But I get this error:
TypeError: Cannot read properties of undefined (reading 'push')
Is it possible to create a dummy dataLayer variable (and maybe have the hand on it to record the calls to the method .push())? If yes, how?
Here is my attempt:
#TestOn('browser')
import 'package:flutter_test/flutter_test.dart';
import 'package:js/js.dart';
import 'my_project/my_file.dart';
class _DataLayer {
void push(dynamic data) {}
}
#JS('dataLayer')
final dataLayer = _DataLayer();
void main() {
test('It should push the event', () {
Manager().pushEvent('myEvent');
});
}
A way to do it would be to load and use a custom HTML file during the tests where you can include a script to create the js variables you need.
Follow the instructions of the package test.
If your test file name is folder/my_test.dart, then you can create a html file named (folder/my_test.html):
<!doctype html>
<html>
<head>
<title>Custom HTML file title</title>
<link rel="x-dart-test" href="my_test.dart">
<script src="packages/test/dart.js"></script>
<script>
window['dataLayer'] = [];
</script>
</head>
</html>
See this StackOverflow answer and this StackOverflow question.
and then you can run
dart test --platform chrome
However, this is only supported with dart test and not flutter test, see this issue. In it, they recommend writing an integration test instead.
I'm trying to make a luxon example in stackblitz, but the imports are not working.
The luxon library and its types are added, and it is imported at the beginning of the file:
However I get the message that it is undefined!
I tried to find other examples of stackblitz (google: "luxon stackblitz") however none of them seem to work or use and old version, which is imported via CDN
Do I somehow have to add the whole luxon library to the project?
Code (super simple)
// Import stylesheets
import './style.css';
import { DateTime } from 'luxon';
// Write TypeScript code!
const appDiv: HTMLElement = document.getElementById('app');
appDiv.innerHTML = `luxon sample -->"${DateTime.now()}"<--`;
On this fiddle https://jsfiddle.net/k2c5upfo/1/, extern modules are called using the import method. I don't use node on my project. I'd like to convert all these import files into regular javascript files. How can I built them without using node.js ?
import * as THREE from "https://cdn.jsdelivr.net/npm/three#0.118.2/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/controls/OrbitControls.js";
import { EffectComposer } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/EffectComposer.js';
import { ShaderPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/ShaderPass.js';
import { RenderPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/RenderPass.js';
import { ClearPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/ClearPass.js';
import { MaskPass, ClearMaskPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/MaskPass.js';
import { CopyShader } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/shaders/CopyShader.js';
For example, I was able to call 'OrbitControls.js' on a older version of three.js by simply add another file. Can I still use this method ? Thank you
EDIT :
I managed to convert my workflow using es6 modules. I've been wondering if there's a way to only import specific modules. My generated output file has the same weight with theses two different lines.
import {Scene, PerspectiveCamera, WebGLRenderer, CylinderBufferGeometry, MeshNormalMaterial, Mesh} from "../node_modules/three/build/three.module.js";
import * THREE from "../node_modules/three/build/three.module.js";
Is there a way to only have the part of code that I need in my final output ? Thank you.
Using global scripts is actually deprecate since r117. At the end of the year, using ES6 modules is the only way of importing example files.
I don't use node on my project.
Not sure I understand this sentence. The above fiddle is unrelated to node.js. You can import ES6 modules directly in HTML files as long as you put the import statements into script tags that look like so:
<script type="module">
</script>
This approach is also used by the official examples.
I am trying to use this library "react-jsonschema-form" to create forms using react and jsonschema.
I am trying to use it in my project as described in the example from the website by including the .js file via cdn. It is not working. The exported component "Form" is undefined.
I had a look at this similar question Using React component from js source maps but I could not understand the solution offered. I am supposed to alias the default export of JSONSchemaForm. But what is JSONSchemaForm? and where can I find it? Is it another library to be included?
Here is what I tried to do:
Using Require.js I have imported the cdn library:
var require = {
baseUrl: "/js/",
waitSeconds: 600,
paths: {
'react-forms': ['https://unpkg.com/react-jsonschema-form/dist/react-jsonschema-form']
},
}
Then in my code I import the library:
var rf = require('react-forms')
But now when I access Form (rf.Form), it is undefined. I had a look at the "react-jsonschema-form.js" source code. "Form" is defined no where.
From the instructions of the library page it is said:
You'll also need to alias the default export property to use the Form component:
const Form = JSONSchemaForm.default;
// or
const {default: Form} = JSONSchemaForm;
But JSONSchemaForm is also undefined.
So I don't know what I am doing wrong. How can I use "react-jsonschema-form" library by including it as a script tag?
Thank you community.
1. Include the cdn path
<script src="https://cdn.jsdelivr.net/npm/react-jsonschema-form#1.0.3/dist/react-jsonschema-form.js"></script>
2.By using field get the access of jsonformDefaultValues;
` <script type="text/babel"
const fields = JSONSchemaForm.default
return(
<Form
schema={schema}
uiSchema={uiSchema}
field={fields}
onSubmit={onSubmit}
</Form>)
</script>`
I was able to solve this problem and I am reporting here the solution for any one facing a simlilar issue. To use react-jsonschema-form via cdn script tag (with require.js):
include this library via require.js by indicating the url path :
paths: {
'react-forms': ['https://unpkg.com/react-jsonschema-form/dist/react-jsonschema-form']
}
include this polyfill library: cdn.polyfill.io/v2/polyfill.min.js
Make sure to use the latest react version ( version v15)
In you code, require the library and alias its default export like this:
var rf = require("react-forms");
const Form = rf.default;
(This is because I am using require.js module system. For another module system, you may use JSONSchemaForm.default)