Is there any way to load separate sets of snippets depending on if I'm developing, for example, a react project vs. a react native project?
Basically, when I hit my keybinding (ctrl+shift+b), it should fill out my Button snippet, which is different for each:
react: "<button className=''>$1</button>",
react-native: "<Button title='$1' onPress={()=>{}}/>",
Right now I have a silly workaround where I use .jsx for web components and .js for react-native components, then configure my snippets for each language-mode accordingly, but I would prefer to use .jsx for both.
This explanation regards to all file types/snippets, the examples are
of adding react snippets.
In VSCode, snippets are loaded according to file association. You can check the current file association on the bottom bar.
Example for JavaScript React file:
Now you need to configure the snippet to the desired file type, for this you need to add files.associations property in settings.json.
File -> Preferences -> Settings -> Open Settings (JSON)
"files.associations": {
"*.react.js": "javascriptreact",
"*.stories.js": "javascriptreact",
"*.action.js": "javascriptreact",
"*.reducer.js": "javascriptreact",
"*.styles.js": "javascriptreact",
"*.jsx": "javascriptreact",
"*.js": "javascript"
}
From this point, files names like MyComponent.react.js will associate with javascriptreact type.
All is left adding your snippets to javascriptreact type:
View -> Command Palette -> Preference: Configure User Snippets
and choose a file type (if exists like javascriptreact.json or create a new file type like javascriptreactnative).
All snippets in the chosen type will associate and auto-suggests.
For example, the next snippet in javascriptreact.json will work only in React files as configured above:
"React Fragment": {
"prefix": "<>",
"body": [
"<>",
"$1",
"</>"
],
"description": "Insert React Fragment"
}
In conclusion, you need to separate .jsx extension to recognize react and react-native, for example: *.native.jsx
Related
I am swapping out one IndexedDb wrapper(localForage) for another(Dexie) and I am unable to run the application because the recommended way to integrate it within the ExtJs framework is not working for me. What have I done wrong?
My current version/s of ExtJs:
framework: 6.6.0.258
Cmd: v6.6.0.13
Dexie version is latest
The Dexie documentation recommends that you set up your database like this
var db = new Dexie("MyDatabase");
db.version(1).stores({
myStoreName, "++id, indexOne, indexTwo",
myOtherStoreName, "++id, indexOne, indexTwo",
});
myExtJsFile.js
Ext.define('DataLayer.Inferface', {
extend: 'Ext.Component',
xtype: 'DLInterface',
config: {
stuff...
db: new Dexie("mydatabaseName"),
}
The way that the ExtJs documentation recommends using an external library is to reference it in the app.json file in the js array
app.json
"js": [
{
"path": "${framework.dir}/build/ext-all-rtl-debug.js"
},
{
"path": "dexie.js" //Dexie is located in the same folder as app.json
},
I get a successful build yet when I go to deploy it(run locally) I get the run-time error listed in the title of this question. I am aware that the intellisense in VSCode isn't working all that good, so I didn't really think much of it when I was not appearing to have access to the global Dexie object.
I have tried several different ways, and places to load this library with m=no luck. I would use a CDN, but it is an offline capable app so I really want the library locally. How should I be getting, referencing, and using 3rd party libraries in Ext?
Thanks.
If You use external library in Ext.define, try to include external libraries before extjs libraries (ext-all-rtl-debug.js, app.js etc.).
Another solution - don`t attach remote libraries on class defines - use initialize/initComponent instead. Example:
Ext.define('DataLayer.Inferface', {
extend: 'Ext.Component',
xtype: 'DLInterface',
config: {
stuff...
},
initComponent: function () {
this.db=new Dexie("mydatabaseName");
this.callParent(arguments);
}
I am tring to add animation to a busyDialog , i can see it well in my development environment but not on FIORI launchpad.
see attached code.
can anyone think why it's not working?
Thanks!
sap.ui.getCore().AppContext._oWaitDialog = new sap.m.BusyDialog({
// text: "Please wait...",
customIcon: "images/LogoLoader_WhiteCircle.gif",
customIconRotationSpeed:0
});
sap.ui.getCore().AppContext._oWaitDialog.open();
you have to include this folder in component.js file, component.js initializes all these folders when app run from Launchpad.return UIComponent.extend("com.yourapp.namspace.Component", {
metadata : {
manifest: "json", /* if you using manifest json file */
includes: ["css/style.css", "images/LogoLoader_WhiteCircle.gif"] /* all folders file that need to be accessed in app, css in case custom css*/
},
I would say you are trying to get UI5 source of an old or local source in index.html
Try
src="https://sapui5.hana.ondemand.com/1.50.6/resources/sap-ui-core.js"
I would like to know if it is possible to add a content script file to a local extension file named for example "test.html", I tried the following but I can not get it to work :
"content_scripts": [
{
"matches": ["popup/test.html"],
"all_frames":true,
"js": ["js/content_script_test.js"]
}
]
I am trying to do this because I would like to be able to use Message Passing from my background script.
You don't need a content script for this, APIs like browser.runtime.sendMessage() and browser.runtime.onMessage.addListener() are available in extension pages, including popups.
I am running a reactjs app with gulp/webpack and tried this:
https://github.com/yahoo/strip-loader.
However it does not work( throws errors in my reactjs code). How to get it working or what is another solution?
EDIT
I added this to the loaders section of the webpack.config:
new webpack.optimize.UglifyJsPlugin({
drop_debug: true
})
I have installed the plugin with npm but it does not filter the debugger statements from my reactjs code?
You can use UglifyJsPlugin() and pass the drop_debugger: true property.
To utilize this property you need to pass it to the compress property inside of the options argument.
new webpack.optimize.UglifyJsPlugin(
compressor: {
drop_debugger: true
}
);
This is an UglifyJS specific property and webpack can pass those directly through compress. Ironically looking at the source of the plugin it can also take the property compressor as an alt property.
you can use strip-loader plugin in webpack.
var WebpackStripLoader = require('strip-loader');
WebpackStripLoader.loader('console.log', 'console.error', 'debugger')
I am in to developing a large client side app with very complex views on each modules using Extjs5. I have developed apps in Extjs but they all compile to a single app.js file. So based on the complexity of the views in all the app mockups I am estimating the size of the app will be around 20MB to 25MB even after compiled.
I was thinking to split the modules as separate applications and create a master app with tabs or something, which triggered will be loading individual apps in a iFrame within the master app. But I doubt if the iframe behaviors are altered in different browsers or deprecated in any future browser releases, that will be another big problem.
So is there any way in sencha cmd, which compiles app in separate files based on modules and load them on demand out of the box ?
If not what is the advisable solution I should be going ahead with.
Starting with Sencha Cmd 6.5 you can split your code into multiple files. To achieve this, you have to split your code into exjts packages if it’s not already done:
In the end, you should have a similar folder structure to this:
workspaceDir
|
+->appA
+->appB
+->packages
|
+-> local
|
+->CoreComponents
+->ProcurementModule
+->ForumModule
+->BOMModule
+->ReportModule
In your app.json file you could add/move your packages from requires to uses. As a last step you have to add the new package-loader to the requires array in app.json.
You end up with something like that:
{
// [...]
"uses": [
"ProcurementModule",
"ForumModule",
"BOMModule",
"ReportModule"
],
"requires": [
"CoreComponents",
"package-loader"
]
// [...]
}
Next you need to start your Sencha Cmd build with the additional flag -uses.
If you do this, Sencha Cmd will build your optional packages first and add them to the resource folder in your build output directory.
sencha app build -uses production
It is important, that you don't have any references to classes in optional packages from your main application. Otherwise your build will fail.
Since your optional packages are not loaded automatically on page startup you need to trigger the loading process manually. I do it usually within the routing process of my AppControllers.
Here an example:
Ext.define('MyApp.view.main.MainController', {
extend: 'Ext.app.ViewController',
requires: [
'Ext.Package'
],
routes: {
'forum': {
before: 'loadForum',
action: 'showView'
}
},
loadForum(action) {
if (Ext.Package.isLoaded('ForumModule')) {
action.resume();
} else {
//Loading mask code here [...]
Ext.defer(() => { // it needs some time to show up the loading mask
Ext.Package.load('ForumModule').then(() => {
//Remove loading mask code here [...]
action.resume(); //proceed router process; all package files loaded
});
}, 500);
}
},
showView() {
this.getView().add({xclass: 'ForumModule.view.MainView'});
}
});
More information on this topic:
http://docs.sencha.com/cmd/guides/whats_new_cmd65.html#whats_new_cmd65_-_dynamic_package_loading