I'm using Dexie, and am trying to use the dexie-relationships addon (https://github.com/ignasbernotas/dexie-relationships). However, after including it, and trying to use it, webpack adds a .default to it, which results in an error as there is no .default on the module.
Code:
import Dexie from 'dexie';
import relationships from 'dexie-relationships'
export class AppDatabase extends Dexie {
constructor(){
super('AppDatabase', {addons: [relationships]});
}
}
What webpack outputs:
const dexie_1 = __webpack_require__(30);
const dexie_relationships_1 = __webpack_require__(57);
class AppDatabase extends dexie_1.default {
constructor() {
super('AppDatabase', { addons: [dexie_relationships_1.default] });
}
}
The dexie_relationships_1.default doesn't work as dexie_relationships_1 is the function that's supposed to be passed.
Why is it doing this, and what can I do to correct this behavior?
Related
import { PrismaClient } from '#prisma/client';
export const prisma = new PrismaClient();
As you may know this issue was being worked on here.
In the mean time what you could do to proceed with your tests is to use dependency injection with a mocked prisma client and to move the deconstruction line
const { PrismaClient } = pkg;
to where your class or function uses it inside an if, i.e:
class MyClass {
prisma: Prisma.PrismaClient
def constructor(props) {
if (!props?.prisma) {
const { PrismaClient } = Prisma
this.prisma = new PrismaClient({
log: ['error']
})
} else {
this.prisma = props.prisma
}
}
}
I know its not ideal but hopefully this does the trick.
to mock the PrismaClient you could mock it using jest-mock-extended like so
const mockPrisma = mockDeep<OriginalPrismaClient>();
I have a class inside my bundled app that I want to allow users of the app to extend.
Here's what the definition of the bundled class looks like:
import * as d3 from 'd3';
class VizPlugin {
constructor(options) {
this.options = options;
}
build() {
}
...
}
export default VizPlugin;
The application is a full client/server nodejs app, installed on a customers server. After the app is bundled/deployed/installed on the server, I want the customer to be able to extend the app and add their own custom modules as extensions/plugins, like this:
import VizPlugin from './js/viz-plugin'; //there is no viz-plugin.js because it's bundled
class ScatterPlot extends VizPlugin {
constructor(options) {
super(options);
}
build() {
//I'd like to also use the reference to d3 from VizPlugin here
}
...
}
export default ScatterPlot;
They would put their javascript code in a directory along side the other bundled client javascript and import from that. Basically, there needs to be a named file called "viz-plugin.js" that can be imported from "scatter-plot.js".
Add d3 to your class, and give the extender some way of using it:
import * as d3 from 'd3';
class VizPlugin {
constructor(options) {
this.options = options;
this.d3 = d3;
}
useD3 (callback) {
callback(this, this.d3);
}
build() {
}
...
}
module.exports = VizPlugin as VizPlugin;
You can use the webpack SplitChunksPlugin and give names to individual modules by using splitChunks.name.
The following code will look for the viz-plugin.js module and tell it to keep it's name:
optimization: {
splitChunks: {
name(module, chunks, cacheGroupKey) {
const moduleId = module.identifier();
if( moduleId && moduleId.indexOf('viz-plugin.js') >= 0 ) {
return 'viz-plugin'
}
return null;
}
}
},
Now, in the dist/build output, there will be a file called "viz-plugin.js" that you can extend, as such:
import VizPlugin from './dist/js/viz-plugin';
class ScatterPlot extends VizPlugin {
constructor(options) {
super(options);
}
build() {
//I'd like to also use the reference to d3 from VizPlugin here
}
...
}
export default ScatterPlot;
I have a class "MessageDisplay" of which I want to call the function sendMassageToServer from the outside. I´ve built a helper function to call from another file. But how do you export functions that are inside classes?
These data are just examples.
main.js
export function sendSpeechToServer(query){
MessageDisplay.sendMessageToServer(query);
}
class MessageDisplay extends React.Component {
constructor(props) {
super(props);
this.state = {message : []};
}
(export const??) sendMessageToServer(searchQuery) {
...code
}
}
We are accesing the sendSpeechToServer() function from another file. Unortunately I am not even able to reach sendMessageToServer() from inside sendSpeechToServer().
Any help surely is appreciated. :)
EDIT:
The answer is found. For any other people:
export function sendSpeechToServer(query){
let test = new MessageDisplay();
test.sendMessageToServer(query);
}
Better way to separate component(MessageDisplay) and sendMessageToServer.
Then you can import sendMessageToServer awry where. You can inject sendMessageToServer like a props:
// main.js
import { sendMessageToServer } from './api';
<MessageDisplay sendMessage={sendMessageToServer} />
// MessageDisplay.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class MessageDisplay extends Component {
static propTypes = {
sendMessage: PropTypes.func.isRequired,
}
handleClick = (e) => {
e.preventDefault();
this.props.sendMessage();
};
render() {
return (<button onClick={this.handleClick}>Send to</button>)
}
}
export default MessageDisplay;
It useful for testing.
Instantiating a component manually for general purposes like let test = new MessageDisplay() is an antipattern, this indicates that a class is misused.
React component classes are primarily intended to make lifecycle hooks available and maintain state. They can sparsely benefit from inheritance (besides the relationship with React.Component) and other OOP traits.
The fact that it's possible to use component method as new MessageDisplay().sendMessageToServer(query) means that it was a mistake to make it component method in the first place. Classes aren't supposed to be glorified namespaces; ES modules play the role of namespaces in modern JavaScript.
A proper way is to extract the method and use it in both places as regular helper function. Functional approach is considered idiomatic in React.
export function sendSpeechToServer(query){
let test = new MessageDisplay();
test.sendMessageToServer(query);
}
it is bad, because you should not, create new react.component instance with new keyword,
better use static function like this
static sendMessageToServer(searchQuery) {
...code
}
and then
export function sendSpeechToServer(query){
MessageDisplay.sendMessageToServer(query);
}
I've read so many answers to this question but I keep running into this issue again and again without really being able to figure out why. The fairly vague error is pointing at an import in action.js...
// actions.js
import { api } from "./api"; <-- this is throwing the babel error
-
// api.js
import BaseApi from "../baseApi";
export default class Api extends BaseApi {
constructor() {
super();
...
}
...
}
export const api = new Api();
-
// baseApi.js
export default class BaseApi {
constructor() {
...
}
...
}
Any help would be greatly appreciated!
Turns out it was a circular dependancy/importing issue, all sorted!
I m actually learning typescript, and I m facing some problems with internal modules.
In fact, I have three files :
index.ts in which I start my app
///<reference path='RouteManager.ts'/>
import RouteManager = RestifyRouting.RouteManager;
var myManager = new RouteManager();
myManager.init("superpath");
RouteManager.ts that manage my REST routes
///<reference path='RouteParser.ts'/>
module RestifyRouting {
export class RouteManager {
routeParser:RouteParser;
constructor() {
}
public init(filePath) {
this.routeParser = new RouteParser();
this.routeParser.register("zfaf","callback");
console.log(filePath);
}
}
}
RouteParser which has to parse some string to get some informations
module RestifyRouting {
export class RouteParser {
constructor() {
}
public register(path, callback) {
console.log('super register');
}
}
}
I have a gulp file that creates my .js and d.ts files and it works great, except for the index.js file. The compiler tells my that RestifyRouting (which is my internal module) is undefined and I dont know why...
Can you help me ?
PS : every files are in the same folder, it's just a learning application.
Thanks for advance
As of TypeScript 1.5 the module syntax is aligned with ES6 module syntax and that is what I have been using as well...
You can remove any references to TypeScript modules and just export the classes directly
index.ts
import { RouteManager } from './RouteManager';
var myManager = new RouteManager();
myManager.init("superpath");
RouteManager.ts
import { RouteParser } from './RouteParser';
export class RouteManager {
routeParser:RouteParser;
constructor() {}
public init(filePath) {
this.routeParser = new RouteParser();
this.routeParser.register("zfaf","callback");
console.log(filePath);
}
}
RouteParser.ts
export class RouteParser {
constructor() {}
public register(path, callback) {
console.log('super register');
}
}
Keeping modules
If you'd like to keep using internal modules then you have to be sure to export your module as well as the classes inside the module.
// RouteManager.ts
export module RestifyRouting {
export class RouteManager{}
}
//index.ts
import { RestifyRouting } from './RouteManager';
//usage
var manager = new RestifyRouting.RouteManager();
Something to keep in mind is that you will not be able to import multiple items into the the same name.
// i.e.
import { RestifyRouting } from './RouteManager';
import { RestifyRouting } from './RouteParser';
NOTES
the {} syntax in the import statement can allow multiple imports
{ Class1, Class2 }
The {} can be skipped if you exporting a default:
//Source (foo.ts):
export default class Foo{}
//Reference:
import Foo from './foo';
//usage:
class User {
foo: Foo;
}