We Keep Coding

How to import node-menu package to my project instead of use require

how can I import node-menu to my typescript project instead of using requiere, like this:
const menu = require('node-menu');
When I import node-menu to my project the next errors appears:

You're importing the menu probity from node-menu instead of the entire module. To fix this, change:
import menu from 'node-menu';
to
import * as menu from 'node-menu';

Most efficient way of importing files from children folders?

I have a parent directory that contains children directories, where each contains an SVG component and I only need to import some of them. I'm currently importing all the components I need by doing this:
import FacebookIcon from 'project/icons/Facebook';
import TwitterIcon from 'project/icons/Twitter';
import DiscordIcon from 'project/icons/Discord';
import MediumIcon from 'project/icons/Medium';
import YoutubeIcon from 'project/icons/Youtube';
However this seems very verbose. Is there a less verbose way of doing this?
I thought about destructuring, but I wasn't sure how to do this since each file is in a different folder.

Typically, you want to import similar components from a single source (you will get auto-complete too):
import {
FacebookIcon,
TwitterIcon,
DiscordIcon,
DiscordIcon,
MediumIcon,
YoutubeIcon,
} from "project/icons";
// Usage
<FacebookIcon/>
// Same
import Icons from './project/icons';
// Usage
const Icon = Icons.FacebookIcon;
<Icon/>
To achieve this, create index.js file in project/icons and make named export for each of the components.
export { default as FacebookIcon } from "./FacebookIcon";
...

Using component without even declaring it

I am very new to Vue and I have read an article or two about it (probably vaguely).
Also, Since I have some understanding of react, I tend to assume certain things to work the same way (but probably they do not)
Anyway, I just started with Quasar and was going through the Quasar boilerplate code
In the myLayout.vue file, I see being used inside my template
<template>
<q-layout view="lHh Lpr lFf">
<q-layout-header>
<q-toolbar
color="negative"
>
<q-btn
flat
dense
round
#click="leftDrawerOpen = !leftDrawerOpen"
aria-label="Menu"
>
<q-icon name="menu" />
</q-btn>
based on my vaguely understanding, I thought for every component we are using to whom we need to pass props we need to import it as well but unfortunately I can't see it in my import-script area
<script>
import { openURL } from 'quasar'
export default {
name: 'MyLayout',
data () {
return {
leftDrawerOpen: this.$q.platform.is.desktop
}
},
methods: {
openURL
}
}
</script>
I would've thought the script to be something like
<script>
import { openURL } from 'quasar'
import {q-icon} from "quasar"
or at least something like that but here we only have
import { openURL } from 'quasar'
Also, Even if we remove the above snippet, our boilerplate app looks to be working fine so here are my two questions
Question 1: What is the use of import { openURL } from 'quasar' (like what it does)
Question 2: How can template contain <quasar-icon> or <quasar-whatever> without even importing it in script tag?

How can template contain <quasar-icon> or <quasar-whatever> without even importing it in script tag?
There are two ways to import components. The first way (which I recommend, and being most similar to React) is to import the component and add it to the components option inside the component that you want to use it within.
App.vue
<div>
<my-component/>
</div>
import MyComponent from 'my-component'
export default {
components: {
MyComponent
}
}
The second way is to import it globally for use within any Vue component in your app. You need only do this once in the entry script of your app. This is what Quasar is doing.
main.js
import Vue from 'vue'
import MyComponent from 'my-component'
Vue.component('my-component', MyComponent)
What is the use of import { openURL } from 'quasar' (like what it does)
I'm not familiar with Quasar, so I can't give you a specific answer here (I don't know what openURL does). You should check the Quasar docs.
openURL is being used as a method here. Perhaps it is being called from somewhere in the template (which you have excluded from the question).

A1) Import statement is 1 way (es6) way to split your code into different files and then import functions/objects/vars from other files or npm modules see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
A2) Vue allows 2 mechanisms to register components. Global and local. Globally registered components does not have to be imported and registered in every component before use (in template or render fn). See URL from comment above https://v2.vuejs.org/v2/guide/components-registration.html#Global-Registration

Javascript how to export modules inside groups

I´ve several React components as a library in folder ux (some itens below):
import MessageBar from "./atoms/MessageBar/MessageBar";
import Spinner from "./atoms/Spinner/Spinner";
import Button from "./atoms/Button/Button";
import AccordionHeader from "./molecules/AccordionHeader/AccordionHeader";
import AutocompleteList from "./molecules/AutocompleteList/AutocompleteList";
import ButtonGroup from "./molecules/ButtonGroup/ButtonGroup";
import LoginPanel from "./organisms/LoginPanel/LoginPanel";
import WelcomePanel from "./organisms/WelcomePanel/WelcomePanel";
I wish to export these objects so that it can be imported from its group:
import LoginPanel from "ux.organisms";
Or
import Button from "ux/atoms";
Or whatever.
The idea is that you are getting the element from an specific group inside ux library.
What is the suggested way to export all of those components, organized into groups (atoms, molecules, organisms, etc.) ?
PS:
a. I don´t wnat to change the component name (ButtomAtom, etc...)
b. The result will be a npm library to be imported by other projects. So, this code will reside on my ux/index.js file.

Then make a index.js file at ux/atoms/ and fill it with:
import MessageBar from "./MessageBar/MessageBar";
import Spinner from "./Spinner/Spinner";
import Button from "./Button/Button";
//...
export { MessageBar, Spinner, Button };
So now one can do:
import { MessageBar } from "ux/atoms";
Or if you need every submodule:
import * as Atoms from "ux/atoms";

RXJS: Property animationFrame doesn't exsist on typeof Scheduler

Trying to play around with RXJS and Scheduler. In the end, I want to have a request animation frame on a scroll event.
Problem:
I'm getting a type error of: Property animationFrame doesn't exsist on typeof Scheduler
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/timer';
import 'rxjs/add/operator/repeat';
import 'rxjs/add/operator/takeUntil';
import { Scheduler } from 'rxjs/Scheduler';
Observable
.of(0, Scheduler.animationFrame) // error here
.repeat()
.takeUntil(Observable.timer(1000))
.subscribe(() => console.log(x++));
Question:
How do I get animationFrame to be recognized?

Since rxjs#6.0.0 animationFrame got renamed to animationFrameScheduler and has to be imported from rxjs.
import { animationFrameScheduler } from 'rxjs';

If you want to use AnimationFrameScheduler you need to import it. Scheduler is a general scheduler class. See https://github.com/ReactiveX/rxjs/blob/master/src/scheduler/animationFrame.ts
import { animationFrame } from 'rxjs/scheduler/animationFrame';
Then use it like this:
Observable.of(0, animationFrame)

It could be bit confusing but top level exported Scheduler and rxjs/Scheduler is different - prior is object contains instance of schedulers to be used, latter is Class to instantiate those. So to get animFrame scheduler instance,
import { animationFrame } from 'rxjs/scheduler/animationFrame';
I've edited answer per comment suggestion, as suggested it is better to import individual directly instead of import something from top level. once top-level import occurs it'll make all operator patching etcs, loading whole library at once so need to be used with caution. (or better not in general).