How do I use material-ui in electron - electron

My code always gave me an error in the electron console, however the same code did not give me an error in a web browser:
import React, { Component } from 'react';
import { Router, Route, Link, browserHistory ,hashHistory} from 'react-router'
import { render } from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { RaisedButton } from 'material-ui';
class App extends Component {
render() {
return (
<MuiThemeProvider>
<RaisedButton className="submit" label='xxxxxxx' labelColor="#fff" backgroundColor="#32a62e"></RaisedButton>
</MuiThemeProvider>
)
}
}
injectTapEventPlugin();
let rootElement = document.getElementById('containers');
render(
<App/>,
rootElement
)

You need to add
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
to the top level of your javascript files as explained in this page of the documentation . It's because there is a dependencey on this module for onTouchTap to work So move it up before the class definition or to the top js file you have.

Related

proper initialization of stimulus controller

The following stimulus component affirms that the controller should read as follows
import { Application } from '#hotwired/stimulus'
import PasswordVisibility from 'stimulus-password-visibility'
const application = Application.start()
application.register('password-visibility', PasswordVisibility)
when most controllers are initialized as import { Controller } from "#hotwired/stimulus"
In either case the following errors are encountered in the browser console:
import { Application } / Application.start()
import { Controller } / Application.start()
import { Controller } / Controller.start()
Contents of javascript/application.js
import { Application } from "#hotwired/stimulus"
const application = Application.start()
// Configure Stimulus development experience
application.debug = false
window.Stimulus = application
export { application }
config/importmap.rb includes pin "stimulus-password-visibility", to: "https://ga.jspm.io/npm:stimulus-password-visibility#2.0.0/dist/stimulus-password-visibility.es.js"
What are the dynamics going on between this Controller and hotwired/stimulus and thus how should this component be effectively written?

Next.js - Metatags not prerendered when using redux-persist

I have a problem with facebook crawler, they only show something like the text below in the thumbnail:
I have an example of a one of my pages: (This is just a test and does not contain open graph tags but even if they are there the fb thumbnail is not working)
import Head from "next/head";
const Test = () => {
return (
<div>
<Head>
<title>Hello</title>
</Head>
<p>Hellow</p>
</div>
);
};
export default Test;
The expected thing is to inspect the source and be able to view this:
<head><title>Hello</title><head>
But instead we I am getting this:
<!DOCTYPE html><html><head><style data-next-hide-fouc="true">body{display:none}</style><noscript data-next-hide-fouc="true"><style>body{display:block}</style></noscript><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills.js?ts=1660199366445"></script><script src="/_next/static/chunks/webpack.js?ts=1660199366445" defer=""></script><script src="/_next/static/chunks/main.js?ts=1660199366445" defer=""></script><script src="/_next/static/chunks/pages/_app.js?ts=1660199366445" defer=""></script><script src="/_next/static/chunks/pages/test.js?ts=1660199366445" defer=""></script><script src="/_next/static/development/_buildManifest.js?ts=1660199366445" defer=""></script><script src="/_next/static/development/_ssgManifest.js?ts=1660199366445" defer=""></script><noscript id="__next_css__DO_NOT_USE__"></noscript></head><body><div id="__next"></div><script src="/_next/static/chunks/react-refresh.js?ts=1660199366445"></script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/test","query":{},"buildId":"development","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
I can view the title once I visit domain.com/test but that's because javascript is filling the title after loading but the problem is that Its supposed to render the title in the beginning.
The problem is here:
import "bootstrap/dist/css/bootstrap.css";
import "../styles/globals.css";
import AppLayout from "../components/layout/AppLayout";
// import { wrapper } from "../store";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { persistor, store } from "../store";
import { injectStore } from "../api";
injectStore(store);
function MyApp({ Component, pageProps }) {
// Use layout that is defined in page, otherwise use the app's layout.
const getLayout =
Component.getLayout ||
function getLayout(page) {
return <AppLayout>{page}</AppLayout>; // App Layout
};
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
{getLayout(<Component {...pageProps} />)}
</PersistGate>
</Provider>
);
}
// export default wrapper.withRedux(MyApp);
export default MyApp;
After I change my code to look like below and it pre-renders the
meta tags and facebook's crawler can view the tags but that involves removing my Redux Provider (which is needed), any ideas?
NOTE: The problem is with redux-persist and PersistGate. I noticed it after testing with a new project and redux (without persisting the state). SEO works normally if working with redux alone.
import "bootstrap/dist/css/bootstrap.css";
import "../styles/globals.css";
import AppLayout from "../components/layout/AppLayout";
// import { wrapper } from "../store";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { persistor, store } from "../store";
import { injectStore } from "../api";
injectStore(store);
function MyApp({ Component, pageProps }) {
// Use layout that is defined in page, otherwise use the app's layout.
const getLayout =
Component.getLayout ||
function getLayout(page) {
return <AppLayout>{page}</AppLayout>; // App Layout
};
return <Component {...pageProps} />;
}
// export default wrapper.withRedux(MyApp);
export default MyApp;
Potential solution:
So basically the is causing the problem of not pre-rendering the meta tags so one option is to add your provider to every page and not wrap your meta-tags inside of the provider but if you have a lot of pages that's not an option so maybe just adding it to the ones that need the provider's data. (of course that is not an option if you are not persisting the state because you would lose your state)
The solution specific to my project
I have different layouts, the only place where I require the store's state is in the admin's dashboard.
So I have a layout for that and in my layout I added the provider because SEO is not important for the dashboard because that has to be seen by few people only.
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { persistor, store } from "../../store";
import { injectStore } from "../../api";
import DashboardLoginCheck from "./DashboardLoginCheck";
injectStore(store);
const DashboardLayout = ({ children }) => {
return (
<>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<DashboardLoginCheck />
<div className="dashboard">
{children}
</div>
</PersistGate>
</Provider>
</>
);
};
export default DashboardLayout;
And my code in _app.js is:
import "bootstrap/dist/css/bootstrap.css";
import "../styles/globals.css";
import AppLayout from "../components/layout/AppLayout";
function MyApp({ Component, pageProps }) {
const getLayout =
Component.getLayout ||
function getLayout(page) {
return <AppLayout>{page}</AppLayout>; // App Layout
};
return getLayout(<Component {...pageProps} />);
}
export default MyApp;
I know there could be a better solution but this could still help anyone, I hope someone else can help us all with a better solution.

Vue2: The right way to include / inject a global utility class

I have Vue.js project where I would like to use a utility class for functions I want to use in all my modules.
modules/Utils.js
export default class Utils {
array_count (arr) {
return Array.isArray(arr) ? arr.length : 0;
}
}
main.js
import Vue from 'vue';
import Utils from 'modules/Utils';
export default new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App
},
utils: Utils // this has no affect?
});
modules/some.js
import Vue from 'vue';
import Utils from 'modules/Utils'; // I don't want this
var utils = new Utils; // I don't want this
console.log(utils.array_count(['a','b','c']));
I don't really understand how to inject the Utils Class. The example above works - but I would like to get rid of the import of the Class in each module. I thought when I add it in main.js as a dependency, I should be able to call it anywhere in my project.
when you want to access the helpers from every component you could register a global mixin.
Change your Utils.js to look like a Mixin.
export default {
methods: {
array_count (arr) {
return Array.isArray(arr) ? arr.length : 0;
}
}
}
Then, import the mixin and add it globally.
import Vue from 'vue';
import Utils from 'modules/Utils';
Vue.mixin(Utils);
export default new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App
},
Alternatively, if you want some helper functions not to be available globally but just in some components, you could import the mixin and add it manually to Vue components.

Efficient and simplest way to insert template based content into generated files with Yeoman generator

Suppose I already have some files generated by a generator and want to create some sub-generators that inserts contents into these files based on some content's template.
The goal is to create a generator of a multilayer architecture composed by 3 layers (for Angular2 app written in typescript):
applicatif layer
metier layer and
business-delegate layer
For each layer, the main generator have to generate all files composing it: a module file, interfaces files, ... The main 3 files generated in this process looks like this:
hero.applicatif.ts:
import { Injectable } from '#angular/core';
import { IHeroApplicatif } from './hero.applicatif.interface';
import { HeroMetier } from '../metier/hero.metier';
#Injectable()
export class HeroApplicatif implements IHeroApplicatif {
constructor(private heroMetier: HeroMetier) {}
}
hero.metier.ts:
import { Injectable } from '#angular/core';
import { IHeroMetier } from './hero.metier.interface';
import { HeroBusinessDelegate } from '../business-delegate/hero.business-delegate';
#Injectable()
export class HeroMetier implements IHeroMetier {
constructor(private heroBusinessDelegate: HeroBusinessDelegate) {}
}
hero.business-delegate.ts:
import { Injectable } from '#angular/core';
import { Http, Headers } from '#angular/http';
import { IHeroBusinessDelegate } from './hero.business-delegate.interface';
#Injectable()
export class HeroBusinessDelegate implements IHeroBusinessDelegate {
constructor(private http: Http) {}
}
Generating these files based on templates doesn't pose problem. But I want sub-generators that prompt the user to input a method name, it's return type and parameters so the sub-generator have to modify each previously generated files to inserts codes that, by default, for each layer, pass the call to the next layer.
Suppose the sub-generator have prompt the user to input a method called getHero, the contents of the 3 files have to be modified like this:
hero.applicatif.ts:
import { Injectable } from '#angular/core';
import { IHeroApplicatif } from './hero.applicatif.interface';
import { HeroMetier } from '../metier/hero.metier';
#Injectable()
export class HeroApplicatif implements IHeroApplicatif {
constructor(private heroMetier: HeroMetier) {}
getHero(id:number): Promise<any> {
return this.heroMetier.getHero(id);
}
}
hero.metier.ts:
import { Injectable } from '#angular/core';
import { IHeroMetier } from './hero.metier.interface';
import { HeroBusinessDelegate } from '../business-delegate/hero.business-delegate';
#Injectable()
export class HeroMetier implements IHeroMetier {
constructor(private heroBusinessDelegate: HeroBusinessDelegate) {}
getHero(id:number): Promise<any> {
return this.heroBusinessDelegate.getHero(id);
}
}
hero.business-delegate.ts:
import { Injectable } from '#angular/core';
import { Http, Headers } from '#angular/http';
import { IHeroBusinessDelegate } from './hero.business-delegate.interface';
#Injectable()
export class HeroBusinessDelegate implements IHeroBusinessDelegate {
constructor(private http: Http) {}
getHero(id:number): Promise<any> {
return this.http.get(...).toPromise();
}
}
What is the simplest, safe, up to date way to do that?
To edit code files content in a safe way that won't mess up with un-predicted changes by the end user, the safest way is to modify a file Abstract Syntax Tree.
There's multiple AST parser available for Node. The two most popular being Esprima and Acorn. There's also a few tools built on those parser to modify AST more easily.
I wrote such a tool a while back if you want to check it out https://github.com/SBoudrias/AST-query - it might works for your use case.

Closing the child no errors but sub movie wont close

Hi i have looked up a lot of answers but havnt been able to fix my problem. I am using external actionscript and i have used the following code:
package
{
import flash.display.MovieClip;
import flash.net.*;
import flash.events.*;
import flash.display.Loader;
import fl.motion.MotionEvent;
import flash.ui.Mouse;
public class submenu1 extends MovieClip
{
private var movieLoader:Loader;
//everything in this function is exicuted when you start the application
public function submenu1()
{
movieLoader = new Loader();
image3_btn.addEventListener(MouseEvent.MOUSE_DOWN,addMovie);
image4_btn.addEventListener(MouseEvent.MOUSE_DOWN,addMovie);
exit_btn.addEventListener(MouseEvent.MOUSE_DOWN,closeTheMovie);
}
private function addMovie(e:MouseEvent)
{
if(e.target.name=="image3_btn")
{
loadTheMovie("image3");
}
else if(e.target.name=="image4_btn")
{
loadTheMovie("image4");
}
}
private function loadTheMovie(m:String)
{
var movieRequest:URLRequest = new URLRequest("../swf/" + m + ".swf");
movieLoader.load(movieRequest);
addChild(movieLoader);
}
private function closeTheMovie (e:MouseEvent)
{
removeChild(movieLoader);
exit_btn.addEventListener(MouseEvent.MOUSE_DOWN,closeTheMovie);
}
}
}
I can get the sub movie to open but i cant get the exit_btn to close the sub movie and return to the original. I am wanting the exit_btn when clicked to remove the child and take you back to the texture page. The flash itself doesn't bring up any errors just the button wont work. Any suggestions?
Did you export to actions script your exit buttons? Right click on the exit button then choose properties and then click on the box called export for actionScript.

Resources