We Keep Coding

Export all constants from files into index.ts and then export those constants as keys of an object?

I have a constant library that has many files such as the following structure:
#1 index.ts
#2 src/
contact.ts
const first = [];
const second = [];
const third = [];
location.ts
const first = '';
const second = '';
const third = '';
Is it possible to import and export all of the constants from each file into index.ts such that I can import into a project such as the following:
// Imports: Constants
import { constants } from '#jeff/constants-library';
console.log(constants.contact.first);
console.log(constants.contact.second);
console.log(constants.contact.third);
What is the fastest/most efficient way to dynamically export the constants from my library files so I can import the into my projects?

In your files like contact and location, you'll need to mark the const values you want as exports. Modules are designed for encapsulation, so dynamic export isn't really an option here. However, it's just a matter of adding the keyword export:
export const first = [];
After that, you can create a constants-library.ts or constants-library/index.ts which automatically exports and imports:
import * as foo from './foo';
import * as bar from './bar';
export const constants = { foo, bar };
At this point, assuming your #jeff path is set up, your code should work as expected:
import { constants } from '#jeff/constants-library';
console.log(constants.contact.first);
Note that this will include all of the exports in your files, since TypeScript can't tell which constants you want or didn't want--it only knows which exports you've listed. As an alternative, rather than exporting all of your consts individually, you could bundle them into a single export using object shorthand.
// in contact.ts and location.ts
export constants = { first, second, third };
// in constant-library.ts or constant-library/index.ts
import { constants as contact } from './contact';
import { constants as location } from './location';
export constants = { contact, location };

Dynamic import image in Vue-3

I'm trying to show a dynamically imported image, but it's not working with the error
'Cannot find module'
This is my component
<template>
<div class="footer">
<div v-for="footerItem in getters" :key="footerItem.id">
<img :src="methods.requireImage(footerItem.icon)" alt="">
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from '#/store'
import { requireImage } from '#/modules/images'
export default defineComponent({
name: 'Footer',
setup () {
const store = useStore()
const methods = {
requireImage
}
return {
getters: store.getters.getFooterItems,
methods
}
}
})
</script>
And this is module
export const requireImage = async (link: string) => {
// return require(link)
const image = await import(link)
return image
// const images = require.context('../assets', false)
// return images('color-circle.svg')
}
Commented out code not working

If you pass the full path to require in a variable, Webpack can't load the image. This is roughly because it's a build-time tool, and the path is created at runtime. If you hard-code at least some of the path though, that will be sufficient:
export const requireImage = link => {
return require(`#/assets/${link}`);
}
Note: Removed the unnecessary async or the return value would be a promise
Your variable footerItem.icon should just contain the filename color-circle.svg now that some of the path is hard-coded in the call to require. With that done, you can use the method in the template as you wanted:
<img :src="methods.requireImage(footerItem.icon)" alt="">
Be aware that at the moment your wrapper method is unnecessary because you could get the same result from:
<img :src="require(`#/assets/${footerItem.icon}`)">

How to import sub objects

Given these exports in a plugin
// Imagine these inner functions are written somewhere
export const WindowFunctions={
maximize: maximizeFunction,
minimize: minimizeFunction
}
export const FileFunctions={
open: openFileFunction,
close: closeFileFunction
}
// Pretend there is 20 other exports here
export default{
WindowFunctions,
FileFunctions,
// imagine those 20 other exports here too
}
When using require, you could access them with
const {maximize} = require('yourPlugin').WindowFunctions
How can this be achieved with import instead?
So far I have been doing this
import {WindowFunctions} from 'yourPlugin'
const maximize = WindowFunctions.maximize
Is there a nicer way to import these?
Thanks

import {WindowFunctions: {maximize}} from 'yourPlugin'
ES2015 named imports do not destructure. Use another statement for destructuring after the import.

react-native - *.js importing *.ts file

How to allow *.js files to import *.ts files in react-native but without rename of any of two files?
we want to import below src/lib/setGlobalStyle.ts file from the src/App.js
//MIT LICENSE from: https://github.com/Ajackster/react-native-global-props
import React from 'react'
import { StyleProp, ViewStyle } from 'react-native'
export function setGlobalStyle(obj, customProps) {
const oldRender = obj.prototype.render;
const initialDefaultProps = obj.prototype.constructor.defaultProps;
obj.prototype.constructor.defaultProps = {
...initialDefaultProps,
...customProps,
}
obj.prototype.render = function render() {
let oldProps = this.props;
this.props = { ...this.props, style: [customProps.style, this.props.style] };
try {
return oldRender.apply(this, arguments);
} finally {
this.props = oldProps;
}
};
}
but below import which is inside App.js only works when we rename the setGlobalStyle.ts file to setGlobalStyle.js:
import * as Utils from './lib/setGlobalStyle'
and of course the setGlobalStyle.ts currently does not contain any TypeScript types, that is because we had to remove all and rename it to .js so we can continue on the project until this gets an answer.
note: the reason why we need TypeScript is to allow IDE autocomplete of the parameters (i.e. the customProps argument).

JSDoc-support in Javascript allows you to import type definitions directly. I know that's not the same as importing the actual module (but I think that is madness if the type definitions exist):
/**
* #param {import("./mymodule").customProps } customProps
*/
export function setGlobalStyle(obj, customProps) {
customProps. // has full auto-completion

How to import a static member of a class?

I am trying to import a static member of a class into a file by just using standard import syntax. To give context:
Destructuring works on the static method of a class:
class Person {
static walk() {
console.log('Walking');
}
}
let {walk} = Person;
console.log(walk); // walk function
However, I thought imports behaved like destructuring assignments. If that's true, then I would expect the following to work. But, when I attempt to import the walk method, it just comes back as undefined:
Destructuring through imports, why doesn't it work?
person.js
export default class Person {
static walk() {
console.log('Walking');
}
}
walker.js
import {walk} from './person';
console.log(walk); // undefined
Since this doesn't seem to work, how can I import a static method from a class to another module?

export default can be mixed with normal exports in ES6. For example :
// module-a.js
export default a = 1;
export const b = 2;
// module-b.js
import a, { b } from "./module-a";
a === 1;
b === 2;
This means that the import brackets are not the same as a destructor assignment.
What you want to achieve is actually not possible in the ES6 specs. Best way to do it, would be to use the destructuring after your import
import Person from "./person";
const { walk } = Person;

The syntax you are using is actually a named import, not a destructuring assignment, although they look similar. There is no destructuring import in ES6. All you can do is to add a destructuring assignment to the next line, but keep in mind that this will break when the imports are cyclic.
import Person from './person';
const { walk } = Person;
console.log(walk);