I have a svelte project that I would like to transpile nullish-coalascing operators (es2020) to es5 using the rollup plugin #rollup/plugin-babel which is enabled by default in #babel/preset-env since babel v7.6.3.
However in my project it does not work. I have a nullish-coalascing operator in a script tag in a component like this:
<script>
let count = 0;
let aCool;
let canio;
const increment = () => {
if (count % 6 === 0) {
canio = 1;
}
count += 1;
aCool = canio ?? 0;
};
console.log('aCool', aCool);
</script>
A minimal svelte project can be found here.
Babel seems to run and add the polyfills from core-js but it does nothing with the ?? operator. Why is it not transpiled?
I found out the reason why it does not work is because I forgot to set .svelte as a file extension that Babel should transpile in the rollup plugin hence it doesn't even look at the svelte code. Thanks #JLHwung!!
Related
I am trying to add storybook.js into my react project and there is a pre-requisite script I need to add to every storybook page so as to render some custom components.
The script's URL needs to be auto generated on the fly in webpack configuration.
This Story rendering section of storybook's documentation mentioned a preview-head.html through which script tags can be injected into the final index HTML file.
I am wondering whether it supports EJS syntax like below for me to access a config option value of the HtmlWebpackPlugin.
<script src="<%= htmlWebpackPlugin.options.foobar %>"></script>
As a workaround, I wrote a decorator in the preview.js file to purposely insert the <script /> tag into the storybook iframe with dynamically generated src field.
const loadAssets = () => {
const scriptElement = document.createElement('script');
// scriptElement.src = /* dynamically generated from dependencies */;
document.querySelector('head').appendChild(scriptElement);
};
const AssetLoader = props => {
React.useEffect(() => loadAssets(), []);
return <>{props.children}</>;
};
const assetLoaderDecorator = storyFn => (
<AssetLoader>{storyFn()}</AssetLoader>
);
addDecorator(assetLoaderDecorator);
It's a bit clumsy but it serves the purpose at the moment.
Inspired by https://github.com/jhta/storybook-external-links.
I am working on a javaScript / react playground (something like very simple codesandbox.io) and I'm trying to figure out how to transpile the code. I was thinking of using Babel transform but the app itself is built using create-react-app so I do not have access to Babel. My question is, if I do something like the following and install Babel, will it also override how create-rect-app currently transpiles the code for the app?
// transpile.js
const babelOptions = {
presets: [ "react", ["es2015", { "modules": false }]]
}
export default function preprocess(str) {
const { code } = Babel.transform(str, babelOptions);
return code;
}
EDIT:
I've since learned that I can use Babel standalone for exactly this use case! Now it's just to figure out how to configure it. I would still appreciate help but if I find a solution first I will post for others :)
Ok so I have figured this out but it is not straight forward. I will try to add some details here in case anyone else finds it helpful.
I first needed to load Babel standalone and so I used this answer to create a custom hook to load a script:
import { useEffect } from 'react';
const useScript = url => {
useEffect(() => {
const script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
console.log(`${url} script loaded`);
return () => {
document.body.removeChild(script);
console.log(`${url} script removed`);
}
}, [url]);
};
export default useScript;
then I used it in my component like this:
import useScript from '../../../hooks/useScript';
useScript("https://unpkg.com/#babel/standalone/babel.min.js");
then I later use the code I wrote in the initial question to transpile my code.
I'm trying to implement Google Pay to my Ionic app. As I didn't find any convenient library matching both, I tried to use what is described here
https://developers.google.com/pay/api/web/guides/tutorial#full-example.
Problem: loading the pay.js library
I don't know how to load the library pay.js in my Ionic project.
I hope that's pretty clear.
Thanks for your help.
You need to first include the pay.js library.
The preferred method is to include the script in your page:
<script src="https://pay.google.com/gp/p/js/pay.js" async></script>
Alternatively, if you need to load it with JavaScript you could dynamically load the script:
function loadScript(src) {
return new Promise(function(resolve, reject) {
let script = document.createElement('script');
script.src = src;
script.onload = () => resolve(script);
script.onerror = () => reject(new Error(`Script load error for ${src}`));
document.head.append(script);
});
}
loadScript('https://pay.google.com/gp/p/js/pay.js')
.then(() => getGooglePayPaymentsClient());
For code completion in supported editors, you can use the #types/googlepay package:
npm install --save-dev #types/googlepay
I recently started to use CKEditor, i have come across to somewhat a weird problem, i have downloaded two plugins ,the "texttransform" and "autogrow",my config file looks like this ,,,
****CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
CKEDITOR.config.extraPlugins = 'texttransform'
config.extraPlugins = 'autogrow';
};****
The problem is, at one time only one plugin is active and functionality of other plugin disappears, for example,when i added autogrow, the control buttons of texttransform disappears,and they only work when i remove the line "config.extraPlugins = 'autogrow';" from my config file, any thoughts?
You are setting the configuration incorrectly. You must set config.extraPlugins only once, with two plugin names:
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'autogrow,texttransform';
};
See also the documentation.
According to TinyMCE API, the following JavaScript code observe changes in TinyMCE editor:
tinyMCE.init({
...
setup : function(ed) {
ed.onChange.add(function(ed, l) {
console.debug('Editor contents was modified. Contents: ' + l.content);
});
}
});
However, I'm unable to run this code from Dart using the js Library. Help is appreciated.
UPDATE:
There is a problem in the JS code above. Alternatively, I found this working code in here:
var ed = new tinymce.Editor('textarea_id', {
init_setting_item: 1,
}, tinymce.EditorManager);
ed.on('change', function(e) {
var content = ed.getContent();
console.log(content);
});
ed.render();
I still need help running the code from Dart. And preferably storing its results in a Dart variable for subsequent processing.
Here's the same code called from Dart :
var ed = new js.Proxy(js.context.tinymce.Editor, 'textarea_id', js.map({
'init_setting_item': 1
}), js.context.tinymce.EditorManager);
js.retain(ed); // retain allows to use 'ed' in the following callback
ed.on('change', new js.Callback.many((e) {
var content = ed.getContent();
window.console.log(content);
}));
ed.render();