Category : preact

How can I change state of the Grid.js component from the plugin context? I’m trying to implement a visual configurator for the pagination.limit prop (https://gridjs.io/docs/config/pagination): import { BaseComponent, BaseProps, h, PluginPosition } from ‘gridjs’; class LimitConfigurator extends BaseComponent { setLimit(limitNew) { // this.setState({ pagination: {limit: limitNew}}); // this.config.pagination.limit = limitNew; } render() { const self ..

Read more

I’m working with preact, and loading a module dynamically within my code, using webpack code-splitting. If I load my core bundle using a script tag, everything works perfectly. If I load it dynamically like the code bellow, the bundle breaks: const script = document.createElement(‘script’); script.src = ‘bundle-location.js’; document.body.appendChild(script); This is the error I get: If ..

Read more

After change react to preact, ive tried to call preact build! but first was outputing no dead browserlist! in the logs show up this: Module build failed: ModuleBuildError: Module build failed: BrowserslistError: Unknown browser query dead“ even removing the from package.json till the error! "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini ..

Read more

working with preact and GUN. the code beneath loops through all products listed(more than one) and returns name, price, and description. <div class="store-items"> ${Object.keys(this.state.items).map(k => { const i = this.state.items[k]; return html` <div class="store-item"> –> <p onClick=${this.showName()} class="name">${i.name}</p> <p class="description">${i.description}</p> <p class="price">${i.price}</p> </div> ` })} </div> What would showName() be so that i get i.name ..

Read more

I am getting this error, While using these aliases. Can you help me? Thanks! Uncaught TypeError: Cannot set property ‘__h’ of null at hooks.module.js:1 at Array.forEach (<anonymous>) at x (hooks.module.js:1) (anonymous) @ hooks.module.js:1 x @ hooks.module.js:1 "preact": "^10.5.12" Webpack alias code! resolve: { alias: { "react": "preact/compat", "react-dom": "preact/compat" } } Source: Ask Javascript..

Read more

I’ve a onClick on component1 that calls a hook in component2 passing props to him: component1: function test(){ return( <div onClick=(() => this.props.changeExample(this.props.example)} /> } component2: changeExample(example){ …do some things } But when I try to test the onClick event of component1 with the following code: it("test onClick", () =>{ let wrapper wrapper = shallow ..

Read more

I’m running a preact project with preact build and doing an import as follows: import PresenceToggleAlert from ‘async?name=presenceToggleAlert!components/alerts/PresenceToggleAlert’; My actual route is components/alerts/presenceToggleAlert (without capital P ) I have tested on MacOS, ubuntu and windows and works perfectly, but at the moment my jenkins server the casing suddenly becomes a problem, throwing an error as ..

Read more

I have the following component: export function SomeComponent () { let t: number console.log("rendering…") return <div> <input type="text" value={"value"} onBlur={() => { t = performance.now() console.log("blur…") const el = document.getElementsByClassName("option")[0] var evObj = document.createEvent("Events") evObj.initEvent("click", true, false) el.dispatchEvent(evObj) }} /> <div onClick={(e) => console.log("click…", e.isTrusted, performance.now() – t)} className="option" >Some Option</div> </div> } If I ..

Read more

I have this existing preact component import { h, Component } from ‘preact’; import { Responsive } from ‘../responsive’; import { Slick } from ‘../../../components/slick’; import clsx from ‘clsx’; const optionsDesktop = { infinite: true, centerMode: true, centerPadding: "31.5%", slidesToShow: 1, slidesToScroll: 3, variableWidth: true, dots: true, prevArrow: null, nextArrow: null, responsive: [{ breakpoint: 768, ..

Read more