I have created and ember in-repo-addon. Let's say say-hello. After that I created ember-eninge. Let's say users-engine.
In may main application I can directly use the addon as
//application.hbs
{{say-hello}}
How to use it in the users-engine ?
//lib/users-engines/templates/index.hbs
{{say-hello}} //It is not working also not throwing any error
I found the answer but not sure whether it is correct way or not.
In the users-engine/package.json add relative path to addons
{
"name": "users-engine",
"keywords": [
"ember-addon",
"ember-engine"
],
"dependencies": {
"ember-cli-htmlbars": "*"
},
"ember-addon": {
"paths": [
"../say-hello"
]
}
}
and now you can use in-repo-addon in ember-engine directly.
//lib/users-engines/templates/index.hbs
{{say-hello}} //It is working now.
Related
I am trying to use the eslint-plugin-simple-import-sort library to sort my imports. I am trying to get my imports to look like this:
import firstAction from 'actions/firstAction';
import secondAction from 'actions/secondAction'
import firstActionTypes from 'actions/firstAction/types'
My .eslintrc.json file looks like this (omitted for clarity):
"plugins": ["react", "simple-import-sort"]
...
"overrides": [
{
"files": ["*.js", "*.jsx"],
"rules": {
"simple-import-sort/imports": [
"error",
{
"groups": [
["^(actions)(/.*|$)"],
["^(reducers)(/.*|$)"]
]
}
]
}
}
]
And I simply just do not know the correct Regex pattern to get the imports to sort how I need, with the appropriate whitespace. Each [] in the groups array does separate with whitespace automatically, so I really just need the Regex pattern to make the actions/*/types imports come after the actions/* imports.
Thanks in advance!
I actually figured out a way to do it which does what I need:
...
"overrides": [
{
"files": ["*.js", "*.jsx"],
"rules": {
"simple-import-sort/imports": [
"error",
{
"groups": [
["^(actions)(/.*|$)"],
["^(actions)(/.*)(types)"],
["^(reducers)(/.*|$)"]
]
}
]
}
}
]
Sorry for the premature question post, mods can delete if needed, or leave it if it helps the community.
Thanks!
I want a dependency manager that will append script tags in order, and avoid duplicating tags with the same src. This has been an issue with the CMS we use.
I put together something like this:
const scriptLoader = new ScriptLoader({
"jquery#3.4.1": {
"attr": {
"src": "https://code.jquery.com/jquery-3.4.1.min.js",
"integrity": "sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=",
"crossOrigin": "anonymous",
},
},
"bootstrap#4.0.0": {
"attr": {
"src": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js",
"integrity": "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl",
"crossOrigin": "anonymous",
},
"dependencies": ["jquery#3.4.1", "popper#1.12.9"],
},
});
// global js
scriptLoader.loadScript("global", {
"src": "js/global.js",
}, ["bootstrap#4.0.0", "jquery#3.4.1"]);
So when global script is loaded, it'll first load the ["bootstrap#4.0.0", "jquery#3.4.1"] dependencies by appending them as tags, before it loads/appends the global.js.
Any attempts to load global.js again will not re-append the script:
// global js - will append
scriptLoader.loadScript("global", {
"src": "js/global.js",
}, ["bootstrap#4.0.0", "jquery#3.4.1"]);
// global js - ignored, already appended/appending
scriptLoader.loadScript("global", {
"src": "js/global.js",
}, ["bootstrap#4.0.0", "jquery#3.4.1"]);
I'd looked into require.js but I'd need to re-write all my js files as require modules which I'm not that keen on.
Does anything of this sort exist already? Mine works ok-ish, but can be a little temperamental at times and would prefer something that's already out there.
As #morganney pointed out, Require.js is designed pretty much exactly for this purpose. Many popular libraries export their libraries in UMD format, which supports the AMD (Async Module Definition) logic Require.js expects.
This will simply import asynchronously all the first level libraries in your object, using just JavaScript import.
From the network debugger tab, we can observe the HTTP code 200 success:
const ScriptLoader = async (libs) => {
for (const [k] of Object.entries(libs)) {
console.log(k, libs[k].attr.src);
await import(libs[k].attr.src)
// Lib ready here
}
}
const scriptLoader = ScriptLoader({
"jquery#3.4.1": {
"attr": {
"src": "https://code.jquery.com/jquery-3.4.1.min.js",
"integrity": "sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=",
"crossOrigin": "anonymous",
},
},
"bootstrap#4.0.0": {
"attr": {
"src": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js",
"integrity": "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl",
"crossOrigin": "anonymous",
},
"dependencies": ["jquery#3.4.1", "popper#1.12.9"],
},
});
I'm using Next.js with typescript. I am trying to also use TypeORM, like so:
#Entity()
export class UserModel extends BaseEntity {
#PrimaryGeneratedColumn('uuid')
id: number
}
But I'm getting an error:
Error: [BABEL] /home/aironside/Documents/private/tatooify/pages/api/user.ts: The decorators plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you want to use the legacy decorators semantics, you can set the 'legacy: true' option.
Here's my .babelrc
{
"presets": ["next/babel"],
"plugins": [
"#babel/plugin-proposal-decorators", {
"legacy": true
},
]
}
And here's the related package.json part
{
"dependencies": {
"#babel/plugin-proposal-decorators": "^7.12.13",
...
},
"devDependencies": {
...
}
}
From what I found, most errors are caused by either not having this plugin installed, or it being in devDep instead of dependencies. What am I missing?
Ok, as shown in the docs (obviously) .babelrc should be like this:
{
"presets": ["next/babel"],
"plugins": [
["#babel/plugin-proposal-decorators", {"legacy": true}]
]
}
Notice the [] around plugin name and options object.
Recently I've moved a project from plain old JavaScript to TypeScript. Previously every test was running fine. Right after the change some test cases just broke and I can not understand why. I'm using Vue.js alongside vue-test-utils and jest.
jest.config.js
module.exports = {
collectCoverageFrom: [
'/src/**/*.{js,jsx,vue}',
'!**/node_modules/**',
'!**/vendor/**',
],
moduleFileExtensions: [
'ts',
'js',
'json',
'vue',
],
transform: {
'.*\\.(vue)$': 'vue-jest',
'^.+\\.js$': 'babel-jest',
'^.+\\.ts$': 'ts-jest',
},
transformIgnorePatterns: [
'<rootDir>/node_modules/(?!vuex-class-modules).+\\.js$',
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1',
},
setupFilesAfterEnv: [
'#testing-library/jest-dom/extend-expect',
],
};
A snippet of an example test that's failing right now, which has been working fine previously.
some.test.js
function mountStore(loggedInState) {
const store = new Vuex.Store({
modules: {
customer: {
namespaced: true,
state: {
isLoggedIn: loggedInState,
},
actions,
},
},
});
return shallowMount(Component, {
localVue,
store,
router,
stubs: { 'router-link': RouterLinkStub },
});
}
describe('Test with customer logged in at beginning', () => {
let wrapper;
beforeEach(() => {
wrapper = mountStore(true);
});
it('should redirect to home if user is logged in on init', () => {
expect(wrapper.vm.$route.name).toBe('Home');
});
});
Regarding this specific test case, the result is as following.
expect(received).toBe(expected) // Object.is equality
Expected: "Home"
Received: null
I also noticed upgrading all dependencies (including some Jest dependencies) leads to even more failing tests. So I expect that to (probably) be the reason, since I just added TypeScript support later on. However, I don't know what dependency combination would lead to a faulty behavior.
Relevant dependencies I've updated, which eventually would lead to even more failing tests.
jest
ts-jest
babel-jest
Add
preset: 'ts-jest/presets/js-with-babel',
to jest.config.js since you use ts-jest with babel-jest. Source.
Did you try adding #types/jest? And adding it in your tsconfig.json:
"types": ["#types/node", "#nuxt/types", "#types/jest", "nuxt-i18n"]
I was having a similar issue. #winwiz1's answer worked for me, but I needed to put it inside the project definition as I'm using the projects syntax. I would just leave this as a comment on #winwiz1's answer, but StackOverflow mangles the format.
projects: [
{
"displayName": "test-unit",
"preset": "ts-jest",
"testMatch": ["<rootDir>/test-unit/**/*\\.tests\\.[t|j]s"]
}
],
We wrote a custom library that we now want to reference in our main application.
Thus we added the following two entries to the consumer's neo-app.json:
{
"path": "/webapp/resources/some/lib",
"target": {
"type": "application",
"name": "somedemolib"
},
"description": "..."
}, {
"path": "/resources/some/lib",
"target": {
"type": "application",
"name": "somedemolib"
},
"description": "..."
}
and the following to the manifest.json of the libs consumer:
"dependencies": {
"minUI5Version": "1.30.0",
"libs": {
...
"some.lib": {
"minVersion": "1.0.0"
}
}
},
However upon loading the web-app I can see a HTTP404 when trying to load the library under the following path:
Uncaught Error: failed to load 'some/lib/library.js' from ../../resources/some/lib/library.js: 404 - Not Found
You have to declare your custom scripts in the first lines of your components.js
First of all you have to declare the path of your custom lib folder:
https://sapui5.netweaver.ondemand.com/sdk/docs/api/symbols/jQuery.sap.html#.registerModulePath
jQuery.sap.registerResourcePath("libs/custom", "/scripts/customlibs");
After that call you are able to load your script from that path with this call:
jQuery.sap.require("libs.custom.nameofyourscript");
"libs.custom" points to that folder you have registered previously and then your are able to import the script by its name. So your components.js looks like this:
jQuery.sap.registerResourcePath("libs/custom", "/scripts/customlibs");
jQuery.sap.require("libs.custom.nameofyourscript");
// Now the declaration of the components starts
sap.ui.core.UIComponent.extend("yourappname.Component", {
// ...