I am just beginning to look into Ember.js engines. One thing that stands out is that for every change I make in the engine code I need to re-install it into the host application. There is no live reload, rebuild or any of this.
Is there a way to smooth out this flow as it would slow down development considerably.
The trick is to set isDevelopingAddon like so in the index.js file for the addon and use NPM link to get it into the main application node_packages folder - you will then get live reload, etc-:
// Addon index.js
isDevelopingAddon: function() {
return true;
}
To add to this I found an interesting article here: Ember and Yarn Workspaces
Related
I'm thinking about developing an Excel add-in as described here.
Would that be possible with Svelte - and do you know of any guides/help if yes?
I have looked through the video here, and I'm about worried about the usage of webpack.
Well... let's break it down
Is it possible?
Short answer: yes
Long answer: the documentation clearly states that Excel add-in still uses jQuery for logic manipulations. If your question was about Angular or react it would probably be a hard NO since those frameworks use an engine that should be included as part of solution. This kind of dependencies when dealing with plugins development are pretty hard to implement and maintain as a function of time so it's better to use very lightweight, non-core dependencies instead. Since you are asking about svelte - it is "compiled" into a bundle that contains pure code (based on your app logic). So - as long as your app rely on the load event sequence described in the docs - you are good to go.
Do you really need Webpack?
Short answer: no
Long answer: svelte can be deployed using rollup instead - which is more suitable for micro-applications (such as yours). So, if you feel that webpack (somehow) is blocking your work pipeline - just use svelete default configuration with rollup and you are ready to go
Your workflow
Create a very simple svelte app (my suggestion - try to take the example in the docs and implement it using svelte)
Test it locally (just verify it works)
Build it (you should ended up with 3 files - 1 html file in public directory and 2 other files in public/build directory - 1 js file and 1 css file (both called bundle)
Here's the tricky part - the html file does nothing - just loading the css and js files. In your case - you don't really need it
Change the bundle.css file to Home.css file
Change the bundle.js file to Home.js file and put your app inside the add-in main function
'use strict';
(function () {
Office.onReady(function() {
// Office is ready
YOUR SVELTE APP CODE SHOULD BE PLACED HERE
});
})();
Pack your add-in and test it
Technical notes
If Excel blocks the creation of new elements (using dynamic injection) - this approach will NOT work (since your entire app is generated by your js file)
Please refer to this article for more information about packing your app
Try to make your app as lightweight and small-size as possible just to avoid the risk of exceeding the limits allowed for add-ins
SOLVED
After having a lot of struggles here the fastest guide you'll ever find on how to setup a react native app with mongoDB realm. My thanks go to Joe who commented.
Setup the backend. Follow every step of the backend tutorial very carefully. IMPORTANT: In Step E5, use your own name for the app instead of the default. This name cannot be changed!
Setup your app with git clone --branch final https://github.com/mongodb-university/realm-tutorial-react-native.git. Therby you skip the whole frontend tutorial.
Remove the .git folder and rename the project root to complete your takeover.
Note that this example project contains backend functions and a lot of additional stuff on the frontend. Use those as cheat sheet for your implementations. Note that if you want to implement your backend functions using your IDE instead of in the online admincentral you need to do another import using realm-cli. Happy coding!
I am having a problem using the "Tabs" component: https://material-ui.com/components/tabs/ In fact, when developing locally, the rendering of the component is fine. But pushing to the server, it looks weird (with differences in the borders on each side of the bar).
Moreover: when refreshing the page in which it has been embedded or browsing manually to this page, the whole template is broken all of a sudden!
I tried generating a build folder locally and launching the page from that build, and fell back on the same problem.
Thank you in advance for your help
From your description, I saw that your "build" is not work even in local development. That's mean it should not work on the production, of course.
The thing is, what is your actual "build" action? Depends on what library/framework you use, but basically with Material-UI, most popular problem comes from not load some CSS before using it's components.
Please read here first: https://material-ui.com/guides/server-rendering/#server-rendering
Just in case you use Gatsby, read here: https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/.
I'm using Gatsby and use this following config to fix some CSS issues.
stylesProvider: {
injectFirst: true,
}
Hope this help.
I'm interested in using Hot Module Replacement with a newly created React app.
Facebook Incubator's create-react-app uses Webpack 2 which can be configured to support HMR, however in order to do so, one needs to "eject" the create-react-app project.
As the documentation points out, this is a "one way" operation and cannot be reversed.
If I'm to do this, I want to know what I might be giving up. I've been unable to locate any documentation that explains the potential drawbacks of ejecting.
The current configuration allows your project to get updates from create-react-app core team. Once you eject you no longer get this.
It's kind of like pulling in bootstrap css via CDN as opposed to downloading the source code and injecting it directly into your project.
If you want more control over your webpack, there are ways to configure/customize it without ejecting:
https://www.npmjs.com/package/custom-react-scripts
I am currently writing a replacement for the plone dialog infrastructure. Mostly for personal use and fun, but available on github as collective.js.jqueryuidialog.
Currently I'm struggling to manage the initialization for the tinyMCE editor in the dialogs.
I tried to get the missing scripts with getScript, but then I get stuck. I googled and found some init hooks, like this one
$(document).bind('loadInsideOverlay', function() {
$('textarea.mce_editable').each(function() {
var config = new TinyMCEConfig($(this).attr('id'));
config.init();
});
});
but none worked.
Any ideas or recommendations to read further?
Update
I updated Products.TinyMCE to version 1.3.3 and proceeded through the upgrade steps in the ZMI. All other functionality is still working (Yeehaa).
I realized, that the call seems to have changed, since all pages with a tinyMCE on it, now issue a get command to a view named tiny_mce_gzp.js that seems to deliver the actual configured editor from the portal.
Actually I am digging the source to find that call and copy it's behavior.