Barrel in Vuejs - javascript

It's possible to do a barrel in Vuejs?
If yes, please show a example, I search in the web, but i didn't find anything
Like js
// app/domain/index.js
export * from './negotiation';
export * from './negotiations';
// app/app.js
import { Negotiation, Negotiations } from './domain';

You can do
export {default as MyModule} from './MyModule.vue';

When I barrel .vue files I do it this way:
Creating the barrel
//index.js
import File1 from './file1'
import File1 from './file1'
export {
File1,
File2
}
Using the barrel file
import { File1, File2 } from './path'

Probably, this will work:
// app/domain/index.js
import NegotiationModule from './negotiation';
import NegotiationsModule from './negotiations';
export const Negotiation = NegotiationModule;
export const Negotiations = NegotiationsModule;
// app/app.js
import { Negotiation, Negotiations } from './domain';
(I haven't tested it, so it could not work)

Create index.js file in the same folder as the components (negotiation, negotiations)
app/domain/index.js
import negotiation from './negotiation.vue'
import negotiations from './negotiations.vue'
export default { negotiation, negotiations };
app/app.js
import domains from './domain';
const { negotiation, negotiations } = domains;
export default {
components: { negotiation, negotiations }
}

Related

How can i export an import for its side effects only in ecmascript 6?

Recently i saw a video that i guy was exporting a module in commonjs:
// src/routes/index.js file
module.exports = [
require('./user'),
require('./auth'),
require('./demo')
]
// src/routes/user.js
const exppres = require('express')
const api = express.Router()
api.post('/user' , doSomething())
// src/handler.js
const express = require('express')
const api = require('./routes')
const app = express()
app.use(api) // add all routes
I tried all different ways of doing, like:
export default {
import "./user",
import "./auth"
}
and in server layer
import api from './routes'
but nothing works...
Someone knows how to do it?
Try this
module.exports = {
user:require('./user'),
auth:require('./auth'),
demo: require('./demo')
}
Then access them like this
const {user,auth, demo} = require("path to the expoted module")
I don't quite understand what you mean by "for its side effects only", because then you wouldn't need to export anything. Importing for side effects only is done like this with ES6 modules:
import './user';
import './auth';
import './demo';
If you wanted to re-export something from these modules, you'd typically write
export * from './user';
export * from './auth';
export * from './demo';
or
export { default as user } from './user';
export { default as auth } from './auth';
export { default as demo } from './demo';
You would not export an array.

How to include multiple import js file into another js file

file constant.js
import { LightningElement } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import CONTACT_OBJECT from '#salesforce/schema/Contact';
import FIRSTNAME_FIELD from '#salesforce/schema/Contact.FirstName';
import LASTNAME_FIELD from '#salesforce/schema/Contact.LastName';
import EMAIL_FIELD from '#salesforce/schema/Contact.Email';
import PHONE_FIELD from '#salesforce/schema/Contact.Phone';
import FAX_FIELD from '#salesforce/schema/Contact.Fax';
file contact.js
export default class LdsCreateRecord extends LightningElement {
}
How can I include constant.js file in contact.js
for more clarification please visit this
Github
If you mean "How can I include contact.js file in constant.js" then it is simple:
import { LdsCreateRecord } from './contact.js';
If you mean what you said: "How can I include constant.js file in contact.js" then you must first export something from constant.js.

import and export module in same file

Does anyone know of a better way to do this?
The goal: import, use, and export createLogger from the same file (application entry point).
WebStorm gives me a duplicate declaration warning.
import createLogger from './logger';
const logger = createLogger('namespace');
export { default as createLogger };
export { * as plugins } from './plugins';
export setup = () => {
// ...
logger.log('');
}
export start = async () => {
// ...
logger.log('');
}
To export multiple functions from the same file just do this:
import createLogger from './logger';
const logger = createLogger('namespace');
import plugins from './plugins';
import anotherLib from './anotherLib';
const setup = () => {
// ...
logger.log('');
}
const start = async () => {
// ...
logger.log('');
}
// export everything without default
export { plugins,
createLogger,
anotherLib,
setup,
start}
You can import them in another file after this is done.
Here's a sandbox to see how it works.
Have a look at this documentation about the export statement.

how ES6 imports and exports works?

I am writing react application and i has dir with actions files my example action file looks like
export const USER_LOADING_START = 'USER_LOADING_START';
export const USER_LOADED = 'USER_LOADED';
export function userLoadingStart() {
return {
type: USER_LOADING_START
};
}
export function userDataLoaded(value) {
return {
type: USER_LOADED,
payload: {
value: value
}
};
}
and in actions dir i have a file named index.js which content is
import * as userActions from './userActions';
let exp = {
...userActions,
};
export default exp;
So in other files i want to import my action creators so i use:
import {userLoadingStart} from './actions';
and it doesn't work but if i write:
import actions from '../actions';
const { userLoadingStart } = actions;
then it is working correctly, so what am i doing wrong ?
i tried
export {
...userActions,
...spinnerActions,
...errorActions
}
and
export exp
but it doesn't compile by webpack
So in other files i want to import my action creators so i use:
import {userLoadingStart} from './actions';
For that to work, it means ./actions must export named values. The issue is that your logic currently bundles everything up and exports it as single named export named default. The easiest way to do that would be for your index to do
export * from './userActions';
to essentially pass everything from ./userActions through as exports of ./actions.

Why es6 react component works only with "export default"?

This component does work:
export class Template extends React.Component {
render() {
return (
<div> component </div>
);
}
};
export default Template;
If i remove last row, it doesn't work.
Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
I guess, I don't understand something in es6 syntax. Isn't it have to export without sign "default"?
Exporting without default means it's a "named export". You can have multiple named exports in a single file. So if you do this,
class Template {}
class AnotherTemplate {}
export { Template, AnotherTemplate }
then you have to import these exports using their exact names. So to use these components in another file you'd have to do,
import {Template, AnotherTemplate} from './components/templates'
Alternatively if you export as the default export like this,
export default class Template {}
Then in another file you import the default export without using the {}, like this,
import Template from './components/templates'
There can only be one default export per file. In React it's a convention to export one component from a file, and to export it is as the default export.
You're free to rename the default export as you import it,
import TheTemplate from './components/templates'
And you can import default and named exports at the same time,
import Template,{AnotherTemplate} from './components/templates'
Add { } while importing and exporting:
export { ... }; |
import { ... } from './Template';
export → import { ... } from './Template'
export default → import ... from './Template'
Here is a working example:
// ExportExample.js
import React from "react";
function DefaultExport() {
return "This is the default export";
}
function Export1() {
return "Export without default 1";
}
function Export2() {
return "Export without default 2";
}
export default DefaultExport;
export { Export1, Export2 };
// App.js
import React from "react";
import DefaultExport, { Export1, Export2 } from "./ExportExample";
export default function App() {
return (
<>
<strong>
<DefaultExport />
</strong>
<br />
<Export1 />
<br />
<Export2 />
</>
);
}
⚡️Working sandbox to play around: https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark
// imports
// ex. importing a single named export
import { MyComponent } from "./MyComponent";
// ex. importing multiple named exports
import { MyComponent, MyComponent2 } from "./MyComponent";
// ex. giving a named import a different name by using "as":
import { MyComponent2 as MyNewComponent } from "./MyComponent";
// exports from ./MyComponent.js file
export const MyComponent = () => {}
export const MyComponent2 = () => {}
import * as MainComponents from "./MyComponent";
// use MainComponents.MyComponent and MainComponents.MyComponent2
//here
EXPORTING OBJECT:
class EmployeeService { }
export default new EmployeeService()
import EmployeeService from "../services/EmployeeService"; // default import
EXPORTING ARRAY
export const arrExport = [
['first', 'First'],
['second', 'Second'],
['third', 'Third'],
]
import {arrExport} from './Message' //named import
// if not react and javascript app then mention .js extension in the import statement.
You can export only one default component and in import can change the name without aliasing it(using as).

Categories

Resources