I just started modifying the electron-react-boilerplate project and tried doing the following:
In the App.tsx file I added a button:
const ping = () => {
electron.ipcRenderer.myAwesomePing('Hello world!');
};
const Hello = () => {
return (
<div>
...
<button type="button" onClick={() => ping()}>
Ping!
</button>
...
</div>
);
};
And in the preload.js file, I added the corresponding call for myAwesomePing:
contextBridge.exposeInMainWorld('electron', {
ipcRenderer: {
myAwesomePing(text) {
ipcRenderer.send('ipc-example', text);
},
When I run the code, everything seems to work fine and I receive the ping through the context-bridge on the main process.
But, visual studio code keeps complaining, that it
Cannot find name 'electron'. Did you mean 'Electron'?
inside App.tsx.
Is this because I am missing something or just a bug in vscode? Is there maybe a build step necessary to create the connection?
ERB recently added support for globally exposed variables via preload:
https://github.com/electron-react-boilerplate/electron-react-boilerplate/blob/main/src/renderer/preload.d.ts
Copy and paste the file into your project and it should just work.
Related
I have a javascript variable (var testButton) in my Nuxt plugins folder. I then added the file to my nuxt.config.js plugins. In my component, I have a Buefy button, and I'm trying to call the script:
<b-button #click="testButton">Click Me</b-button>
...
<script>
export default {
mounted () {
this.$testButton()
}
}
</script>
I import the script in my script section and have tried computed and mounted lifecycles. Not sure what I'm doing wrong. Thank you
Check the following things, you must be missing one or more:
1. Your plugin should export a method. That method should receive an 'inject' function and use it to register your 'testButton' function.
So, in your ~/plugins/testButton.js
export default (context, inject) => {
inject('testButton', () => {
console.log('testButton works!')
})
}
2. You shuold register your plugin correctly in the nuxt.conf.js file
Do it like so:
plugins: [
{ src: '~/plugins/testButton.js' },
],
3. Call it as '$testButton()' (note that Nuxt will have added a dollar sign to your method's name).
Your '$testButton' method will now be available from anywhere in your nuxt app. You don't have to import it o create any computed property.
<b-button #click="$testButton">Click Me</b-button>
<script>
export default {
}
</script>
I want to include an external rtf component in my svelte app.
I tried adding tinymce using the cdn in template.htm and then creating the following svelte component. The editor renders, however I can't get data into or out of the editor.
<script>
import { onMount, tick } from 'svelte'
export let label = ''
export let value = ''
$: console.log('value', value)
onMount(() => {
tinymce.init({
selector: '#tiny',
})
})
</script>
<p>
<label class="w3-text-grey">{label}</label>
<textarea id="tiny" bind:value />
</p>
Super old but encountered this today and found a solution.
Solution:
<svelte:head>
<script src="https://cdn.tiny..."></script>
</svelte:head>
<script>
import {onMount} from 'svelte';
let getHTML;
let myHTML;
onMount(() => {
tinymce.init({
selector: '#tiny'
})
getHTML = () => {
myHTML = tinymce.get('tiny').getContent();
}
})
</script>
<textarea id="tiny" bind:value />
<!-- click to get html from the editor -->
<button on:click={getHTML}>Get HTML from TinyMCE</button>
<!-- html is printed here -->
{myHTML}
Explanation:
My initial thought was to bind per normal with
<textarea bind:value></textarea>
but that doesn't work I think because tinyMCE is doing complicated stuff in the background. Instead of adding the cdn reference in template.htm I used <svelte:head> so it only is loaded for this component. The function tinymce.get('...').getContent() must be called to get the contents of the editor, but it requires tinyMCE, so it must be called within the onMount. So I define a function getHTML within onMount. Now getHTML can be used anywhere to assign the contents of the editor to myHTML.
step one:
run this command on in your terminal
npm install #tinymce/tinymce-svelte
(reference for installation : https://www.tiny.cloud/docs/integrations/svelte/)
step two :
<script>
import { onMount } from 'svelte';
let myComponent;
let summary='';
onMount(async()=>{
const module=await import ('#tinymce/tinymce-svelte');
myComponent=module.default;
})
</script>
step three :
<svelte:component this={myComponent} bind:value={summary}/>
{#html summary}
I'm loading the Paypal smart button into a vue component. I've tried loading the external Paypal js script, which appears to create a paypal object.
However when trying to access the paypal object, I get this error:
found in
---> <PaypalButton> at resources/assets/js/components/PaypalButton.vue
<Root>
After the page is loaded, I can successfully console.log(paypal) in chrome dev tools console window, and I can also successfully create a button in vue to also access it, but it does not appear to be able to referenced in the mounted hook.
Here is the code:
<template>
<div class="paypal-button-wrapper">
<div id="paypal-button-container"></div>
<button #click="showPaypal">Clicking this successfully renders the button</button>
</div>
</template>
<script>
export default {
data: () => ({
}),
mounted: function () {
let paypalScript = document.createElement('script');
paypalScript.setAttribute('src', 'https://www.paypal.com/sdk/js?client-id=AUo4kSgRdH44poEYLQwPdqM24oN8nQc4Jm1HAkWs5vQTAMGu-BBlpfN4xnMDEzSGfj4wjwOy6eLtNKyv¤cy=USD');
document.head.appendChild(paypalScript);
this.showPaypal(); // fails to render the paypal button, with reference error
},
methods: {
showPaypal: function() {
paypal.Buttons().render('#paypal-button-container');
}
}
};
</script>
The solution is to use paypalScript.onload. I'm not sure if this is the most direct method, but it does work.
mounted: function () {
let paypalScript = document.createElement('script');
paypalScript.setAttribute('src', 'https://www.paypal.com/sdk/js?client-id=SB_ID¤cy=USD');
document.head.appendChild(paypalScript);
var that = this;
paypalScript.onload = function () {
that.showPaypal();
};
},
Reference: Run the method of the Vue component after the external script is loaded
i have created an aurelia plugin using the skelton-plugin https://github.com/aurelia/skeleton-plugin i am now looking at writing unit tests for it.
i am stuggling to get a unit test running for a custom element ive added to the project. i started with the 'testing a custom element' example from http://aurelia.io/hub.html#/doc/article/aurelia/testing/latest/testing-components/3
template:
<template>
<div class="firstName">${firstName}</div>
</template>
vm
import {bindable} from 'aurelia-framework';
export class MyComponent {
#bindable firstName;
}
i added this to the src folder.
my test code is
import {StageComponent} from 'aurelia-testing';
import {bootstrap} from 'aurelia-bootstrapper';
describe('MyComponent', () => {
let component;
beforeEach(() => {
component = StageComponent
.withResources('my-component')
.inView('<my-component first-name.bind="firstName"></my-component>')
.boundTo({ firstName: 'Bob' });
});
it('should render first name', done => {
component.create(bootstrap).then(() => {
const nameElement = document.querySelector('.firstName');
expect(nameElement.innerHTML).toBe('Bob');
done();
}).catch(e => { console.log(e.toString()) });
});
afterEach(() => {
component.dispose();
});
});
i jspm installed aurelia-bootstrapper and aurelia-testing to get it running.
im now getting the error
Error{stack: '(SystemJS) XHR error (404 Not Found) loading http://localhost:9876/base/my-component.js
so it looks like karma cant find my component. i checked the karma.config file and the jspm loadFiles: ['test/setup.js', 'test/unit/**/*.js'], looks correct.
has any one run into a similar issue?
solved the issue.
in karma.config.js file needed to change
serveFiles: ['src//.']
to
serveFiles: ['src//*.js', 'src/**/*.html']
I'm trying to add a custom button for umbraco richtext datatype, so i made a simple plugin for TinyMCE... But i cant seem to get it working, it shows up in the datatype, but not when i open the editor for some page...
//File: umbraco_client/tinymce3/plugins/addarrowheader/editor_plugin_src.js
//Same content in editor_plugin.js (just minified)
(function () {
tinymce.create('tinymce.plugins.mceAddArrowHeader', {
init: function (ed, url) {
ed.addCommand('addHeader', function () {
alert('hello!');
});
ed.addButton('addArrow', { title: 'DoAdd', image: '/images/editor/umbracoTextGen.gif', cmd: 'addHeader' });
},
getInfo: function () {
return {
longname: 'mceAddArrowHeader',
author: 'Bekker',
authorurl: 'Eksponent.com',
infourl: 'none',
version: tinymce.majorVersion + "." + tinymce.minorVersion
};
}
});
// Register plugin
tinymce.PluginManager.add('mceAddArrowHeader', tinymce.plugins.mceAddArrowHeader);
})();
Added following to tinyMceConfig.config (/config/ folder)
//in <commands>
<command>
<umbracoAlias>mceAddArrowHeader</umbracoAlias>
<icon>images/editor/spellchecker.gif</icon>
<tinyMceCommand value="" userInterface="true" frontendCommand="mceAddArrowHeader">addarrowheader</tinyMceCommand>
<priority>76</priority>
</command>
//In <plugins>
//just using spellchecker.gif for test purpose, no custom icon yet...
<plugin loadOnFrontend="false">addarrowheader</plugin>
It seemed to be a matter of wrong plugin folder naming...
Didnt know that it had an impact, but renaming the folder to same name as the plugin (mceAddArrowHeader) solved the problem.