We Keep Coding

Twind Configuration not working with LitElement

I can't seem to get theme working with LitElement. I can set the other props of setup no problem, but the theme doesn't get recognized by Twind. It's also worth mentioning that I get no error when compiling. Anyone have a quick solution?
import {LitElement, html} from 'lit';
import {setup, warn, create, cssomSheet} from 'twind';
setup({
mode: warn,
theme: {
colors: {
purple: '#2013',
},
},
});
const sheet = cssomSheet({target: new CSSStyleSheet()});
const {tw} = create({sheet});
export class MyApp extends LitElement {
static styles = [sheet.target];
static get properties() {
return {
name: {type: String},
};
}
constructor() {
super();
this.name = 'World';
}
render() {
return html` <h1 class="${tw`text(3xl purple)`}">${this.name}!</h1> `;
}
}
window.customElements.define('my-app', MyApp);

Probably, the problem is the shadow-dom.
If you can use Twind, you can try to render to light-dom, instead shadow-dom.
To use light-dom add in your web-component class this method:
createRenderRoot() {
return this;
}
In other hand, I don't sure it works without Lit...

Should I new a utils class in es6?

I have declared a class, like:
export default class Utils {
static deepClone(): object {
return {}
}
}
so when I want to use deepClone, I can:
// First One
import Utils from './Utils';
export default class Element {
constructor(){
this.utils = new Utils()
}
create(){
return this.utils.deepClone()
}
}
or：
// Second One
import Utils from './Utils';
export default class Element {
constructor(){
this.utils = Utils
// this is an optional
// in my child class I need't to import Utils
// I can use this.utils.deepClone() directly
}
create(){
return Utils.deepClone()
}
}
I wonder which is a better way to imply Element class
Looking forward to your reply, I can’t thank you enough

The second way is more correct but it has a problem that you should create an instance of Utils class to use each property which isn't a static method.
The output of a class that you didn't create an instance is a function instead of an object of prototypes.
./Utils.js
export default class Utils {
static deepClone(): object {
return {}
}
public deepExtend() {
// deepClone code
}
}
Use in another file:
import Utils from './Utils';
export default class Element {
constructor(){
this.utils = new Utils();
}
create(){
return Utils.deepClone()
}
extend(){
return this.utils.deepExtend()
}
}

I would return export new of the Utils and I will pass it in the constructor of your Element as an Instance, something like:
IUtils = someInterface;
export default class Element {
constructor(utils: IUtils){
this.utils = utils;
}
create(){
return this.utils.deepClone()
}
}
In these way it:
Doesn't create new instances for nothing
Uses other instances that you can pass to your Element class
Is testable

Call function from imported helper class in Vue.js component data

I am trying to call a JavaScript function from an imported helper class in my Vue.js component. I import my helper class in my component and try to use mounted() to call it and pass a paramter to the helper class.
I tried out some solutions from here, but didn't help:
Vue.js: Import class with function and call it in child component
https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266
This is what I tried so far, any ideas?
I have a helper class myHelper.js:
export default myHelper {
myHelperFunction(param) {
return param;
}
}
I have a Vue component MyComponent.vue:
<template>
<v-text-field :rules="[myRule]"></v-text-field>
</template>
<script>
import myHelper from './myHelper.js';
export default {
name: 'MyComponent',
data() {
return {
myCls: new myHelper(),
myRule: this.callHelperFunction,
};
},
components: {
myHelper,
},
mounted() {
this.myCls.myHelperFunction();
},
methods: {
callHelperFunction(param) {
this.myCls.myHelperFunction(param);
}
},
};
</script>

You are not really exporting the class. It is a plain object. To export a class instead of an object do this:
// Notice the use of class keyword
export default class MyHelper {
myHelperFunction(param) {
return param;
}
}
Also, you do not need:
components: {
myHelper,
},
Rest of the code stays the same.

'filterType' is not defined. trying to filter JSON objects trough react-mobx

I have some code on react that should re-render the main page when I click. but it does not work. Can someone suggest an idea?
/store/index.js
import jsonObjects from './jsonObjects';
class RootStore {
constructor() {
this.jsonObjects = new jsonObjects(this);
}
}
export default RootStore;
/store/jsonObjects.js
import sciences from '../data/sciences.json'
class JsonObjects {
jsonObjectsList = observable(JSON.parse(sciences))
get jsonObjects() {
return this.jsonObjectsList.filter(jsonObjects => jsonObjects.deleted === false);
}
handleClick() {}
}
decorate(JsonObjects, {
handleClick: action,
jsonObjects: computed
})
export default JsonObjects;

Typescript - Calling a class exported from another file.

I have a file called searchBar.ts in which contains a init() function that I wish to call in a file called index.ts.
My searchBar.ts file looks like this:
class searchBar {
init() {
console.log('work you C*&*T')
}
}
export let searchBarClass = new searchBar;
I then want to be able to call this function in index.ts. I am currently trying to do this with the below code but init is never found with my intellisense:
import { searchBarClass } from './modules/searchBar';
class Main {
searchBarClass.init()
}
let main = new Main();
export {main}
Later on I then want to wrap the function in a global function that I'll call in the HTML file.
Let me know your thoughts

If you want to export a class and call the init() method on the object instance:
export class SearchBar {
init() {
console.log('work you C*&*T')
}
}
Then accessing it from another file:
import { SearchBar } from './modules/searchBar';
export class Main {
constructor() {
let searchBar = new SearchBar();
searchBar.init();
}
}
let main = new Main();
If you want to access the init() function statically:
export class SearchBar {
static init() {
console.log('work you C*&*T')
}
}
Then accessing it from another file:
import { SearchBar } from './modules/searchBar';
export class Main {
constructor() {
SearchBar.init();
}
}
let main = new Main();