We use AG Grid. I want to add our license as a side effect before exporting the React component for use, rather than having to add the license every time we use the grid component.
What I tried below doesn't work. I thought side effects would run before import/export if declared like this, but clearly my mental model was wrong. I assume the build tool may affect what happens too, we use Gulp in this particular case.
GridSupport.js (in a design package/repo)
/**
* AG Grid License
*/
import { LicenseManager } from "#ag-grid-enterprise/core";
LicenseManager.setLicenseKey('…some license key…');
// Export below happens, but no license set above :(
export { AgGridReact as default } from "#ag-grid-community/react";
Grid.js (in another package/repo)
import { AgGridReact } from 'GridSupport';
const Grid = (props) => {
// AgGridReact should be usable without printing license warnings to the console
return <AgGridReact {...props} />
}
What should I do instead?
Why not Initialize the license manager at the top level (App.js, or index.js)? it would cover all the encompassing grids.
As a side note: Just make sure to check that you are not mixing packages and modules for the grid when using enterprise package.
The question was edited to clarify that the two files were in two different packages.
We landed on adding the GridSupport.js to sideEffects in our design package/repo. This ensured that the license was set correctly as a side effect before the export happened.
package.json
{
"name": "#ourcompany/design",
"sideEffects": [
"some/path/GridSupport.js"
],
"dependencies": [
"ag-grid-community": "...",
"ag-grid-enterprise": "...",
"ag-grid-react": "..."
]
}
Related
First off, I'm a beginner with NuxtJS and front-end development in general, so it might be that I'm missing something - though I do believe I went through all the options before posting here. Apologies in advance if that is not the case.
I've been having trouble using installed modules that I've registered as plugins. For example, take mapbox-sdk.
After installing it with npm install #mapbox/mapbox-sdk, which correctly creates #mapbox/mapbox-sdk in node_modules, I register it in nuxt.config.js:
plugins: [
...
"~/plugins/mapbox-sdk.js",
],
Of course, I also create the mapbox-sdk.js file in plugins/, containing:
import "#mapbox/mapbox-sdk";
Then, in a page (say, myMap.vue), when I try:
var mapboxClient = mapboxSdk({ accessToken: MY_ACCESS_TOKEN });
which is the basic usage example in the documentation, I get:
mapboxSdk is not defined
in the console. This behavior extends to every single module I installed today, but is not the case for modules I had previously installed.
The reason why you're getting the error mapboxSdk is not defined is because there are a few issues with the way you've set up this plugin.
Docs here https://nuxtjs.org/docs/2.x/directory-structure/plugins/, they have some useful diagrams.
There are a couple of ways you can use this package.
Plugin
// ~/plugins/mapbox-sdk.js
import mapboxSdk from '#mapbox/mapbox-sdk'
export default (_ctx, inject) => {
// Exposing the mapboxSdk to your Nuxt app as $mapBox.
inject('mapBox', mapboxSdk)
}
Then in nuxt.config.js, same as you've already done.
plugins: [
...
"~/plugins/mapbox-sdk.js",
],
Then in your component myMap.vue
var mapboxClient = this.$mapBox({ accessToken: MY_ACCESS_TOKEN });
Directly in the component:
If you don't wish to use a plugin, the way that #kissu mentioned above https://stackoverflow.com/a/67421094/12205549 will also work.
Try adding this after the import to let Vue know that this method exists (in the same .vue file) at first
<script>
import mapboxSdk from '#mapbox/mapbox-sdk'
export default {
methods: {
mapboxSdk,
},
mounted() {
console.log('mapbox function >>', mapboxSdk)
},
}
</script>
Do you have it working in a .vue component at first ?
I am using Vue with Tailwind right now.
Here is my current Tailwind config:
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
purge: [],
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
variants: {},
plugins: [],
}
I am using the Inter var font, because on OSX systems the default font weights do not work. Right now, I want to build this project, but in the production version it does not apply the correct font family. I've tried to import the font family via a html link and css import, but neither of those worked.
If you're on Vue-CLI, I'd recommend adding the typeface via NPM for maintainability, and import it into your entry file (e.g. main.js). This package will take care of referencing and importing the webfont(s) for you, so there's no need to create additional CSS anymore.
Installing the font
npm i typeface-inter
Importing it
import Vue from 'vue';
import 'typeface-inter';
// ...
And of course, you'll still need to extend the font-family (or simply adding it to the list will work too).
I'm new to react-native coming from vue background, one thing I hate in react is having to use relative path imports in my components, I find myself doing something like:
import HomeScreen from '../../components/screens/HomeScreen'
If my folder structure changes it means I will have to do a search and replace in all of m components using that component, not cool and prone to be a dev hell.
Is it possible to use absolute paths like with node modules, is there a library where I can use aliases or similar, with vue I could import my components in the app.js like Vue.component('home-screen ...) and I could use them without having to import.
you can add a package.json file with a name key
{
"name": "#components"
}
in any folder and metro will recognize it.
You can then import as #components/screens/HomeScreen
If you are using vscode, you can add a jsconfig.json file to your project root to enable import autocomplete.
Here is mine:
{
"compilerOptions": {
"baseUrl": "",
"paths": {
"#components/*": ["src/components/*"],
"#helper/*": ["src/helper/*"],
"#actions/*": ["src/actions/*"],
"#constants/*": ["src/constants/*"],
"#primitives": ["src/primitives/index.js"],
"#graphql": ["src/graphql/index.js"],
"#services/*": ["src/services/*"],
"#assets/*": ["assets/*"]
}
}
}
The easy method
Add a package.json to important directories with a {"name":"<prefix>"}, similar to a monorepo.
If you are doing this, you can probably also think about making it a full monorepo since there is very little extra work
The incredibly complex method
This method is easier for using things like webpack resolver, etc.
Create a metro.config.js at the root with the following content
module.export = {
resolver: {
resolveRequest: (
context: ResolutionContext,
moduleName: string,
platform: string | null
) => {
//...
return Resolution;
}
}
}
Resolution Context
The resolution context is an object that holds attributes of the running resolution, most importantly originModulePath which is the path of the requiring module.
Resolution
The resolution is an object of either:
{ type: "empty" } for empty sources
{ type: "sourceFile", filePath: string } for JS, JSON, etc. files
{ type: "assetFiles", filePaths: string[] } for any other type (e.g. not metro compilable)
For this method, I would recommend looking at metro-resolver's types since this method is abysmally documented
I'm trying to use https://www.npmjs.com/package/js-pagination within aurelia project.
I did au install js-pagination and did check the aurelia.json.
That part was added to vendor-bundle:
{
"name": "js-pagination",
"main": "dist/index.js",
"path": "../node_modules/js-pagination",
"resources": [
"dist/styles.css"
]
}
the ./node_modules/js-pagination and ./node_modules/js-pagination/dist/index.js are in place
I did check the vendor-bundle.js
and it has three lines about js-pagination.
One line is a source of ./dist/index.js
and next two lines are
define("js-pagination/dist/index", [],function(){});
;define('js-pagination', ['js-pagination/dist/index'], function (main) { return main; });
My problem is:
I'm trying to use it inside my module, like
let Pagination = require('js-pagination')
and Pagination is still undefined
I did try with
import * as Pagination from 'js-pagination'
and default property of Pagination module is undefined
import {Pagination} from 'js-pagination'
does not make a show as well
I'm missing something, but cannot realize what exactly.
Please advice.
I am writing a UI5 faceless component which should be used in multiple other applications. The target applications are located in a package of an SAPUI5 ABAP respository. The component that should be included in the targets is in a different package in the same SAPUI5 ABAP repository.
How do I include this component? From documentation I added changes to the target manifest.json in the following way:
"dependencies": {
"minUI5Version": "1.30.0",
"libs": { "sap.m": {}, "sap.ui.core": {}, "sap.ui.layout": {} },
"components": { "cls.dva": {} }
},
But how is the component actually found ? Here I used the SICF node path. Do I have to add ".Component" to the path? Is there another place where I have to reference the dependent component in the target app?
Another questions is how and where do I instantiate the component? Is the init() function of the target Component.js the right place? There are also some parameters I would have to pass to properly inialize it. In the end the component and its data should be available app wide.
Thank you,
Christian
another Christian here... :-)
regarding to your question you need to keep two things in mind:
The id of your faceless component
The name of your faceless component in the SAP ABAP repository
The dependencies section of your app is the right place to put the component you want to load into.
Thereby it is not important in which package of the SAP ABAP repository your faceless component is laying. Important is the id.
Let's take a look into the manifest of your faceless component:
{
"_version": "1.4.0",
"sap.app": {
"id": "cls.dva",
"type": "component",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"resources": "resources.json",
...
},
"sap.ui": {
...
}
...
}
As you can see the Id of this component is equal to the Id you type into the dependencies section of the app that shall use your component. That's all you need to take care of.
Now, if you want to load and access your dependent component in the init function of your Component.js (which is a good place if it should be available in the whole app), you can do the following (here you need the name of the reuse component that you gave it during the first deployment, e.g. z_cls_dva):
init: function() {
sap.ui.component({
manifestUrl: "/sap/bc/ui5_ui5/sap/z_cls_dva/manifest.json",
async: true,
manifestFirst: true,
componentData: { componentSetting: true }
}).then(function(oComponent) {
this._clsDvaReuse = oComponent
}.bind(this)).catch(function(sError) {
jQuery.sap.log.error(sError, "-", this.getManifestEntry("sap.app").id)
}.bind(this))
}
Via the componentData you are able to provide parameters to the reuse component. There you can call this.getComponentData() to access them. You could also use the settings property to provide your configuration to the component. Read the sap.ui.component documentation for more details.
Notice: As of SAPUI5 1.48 the recommendation for loading reuse components changed. See the corresponding article in the sdk documentation.