Svelte Import Files other than JavaScript - javascript

In the svelte example app there are imports like this:
import './app.css'
import svelteLogo from './assets/svelte.svg'
I could not find an explanation on the official documentation.
I am guessing that this is a svelte and not a js feature?
Which files can you import? And how do they get imported, e.g. import './app.css' applies the stylesheet and import svelteLogo from './assets/svelte.svg' appears to save the path in svelteLogo.
I searched "Svelte Import Files other than JavaScript", "js import files" and searched on https://svelte.dev/docs.

It has nothing to do with Svelte or JS, it's something build tools provide.
Common types may be supported out of the box while others require plugins/loaders.
SvelteKit e.g. uses Vite but there are others like Webpack or Parcel.

Related

Creating File Template in Intellij with importing files relativly

I'm trying to build a file template for a react component for my team at work.
I have built the file template according to what Intellij offers, but I get stuck in one thing:
How can I import files into my file template, but without knowing where I am regarding the root folder?
We do use absolute imports so I do use it inside my component file, but it doesn't work in my test file and I have something that calls AppMock that mocks the behavior of our app, and I can't import absolute on it.
Any solutions will be welcomed, thanks
I tried to look for import files relatively in my file template but I couldn't find anything that matches to my problem
Here is an example of what I talk about:
import { render, screen } from '#testing-library/react';
import user from '#testing-library/user-event';
import React from 'react';
import { $NAME } from './${NAME}';
import { noop } from 'lodash'
import { AppMock } from '../../../../../../config/jest/testHelpers/AppMock';
As you can see, the imports are external libraries, except AppMock because we don't work with absolute imports in test files, and because of that I didn't find a way to create a file template for test file.

How to solve the lit build-in directives import error?

Using lit 2.5.0 in combination with vite I run into an issue using the lit build-in directives.
Following the docs I added an import to my lit js component like:
import { when } from 'lit/directives/when';
But when I view the resulting site in the browser I always get a missing package error:
Missing "./directives/when" export in "lit" package
Any suggestions on how to fix this import issue?
You need to include the .js extension as well.
import { when } from 'lit/directives/when.js';
This is needed because that's how it's listed in the "exports" of the package which you can see in the package.json file. https://unpkg.com/lit#2.5.0/package.json
"./directives/when.js": {
"types": "./development/directives/when.d.ts",
"default": "./directives/when.js"
},
Rationale for this is to encourage usage of file extensions in import specifiers so as to not require bloated import maps in the browser to support extensionless imports. Described more in detail https://lit.dev/docs/tools/publishing/#include-file-extensions-in-import-specifiers and https://github.com/WICG/import-maps#extension-less-imports.

Importing many components

as you can see below my app.js file , because the website im coding contains numerous components, the importing part of the files is overwhelmingly has many lines , as a newbie to Reactjs i wanna ask if there is a more better and professional way to import all the components using less code. thanks
import Navbar from "./components/navbar/Navbar";
import Home from "./pages/Home";
import Socials from "./pages/Socials";
import ToolsServices from "./pages/ToolsServices";
import Marketplace from "./pages/Marketplace";
import NotFound from "./pages/NotFound";
import Locations from "./pages/Locations";
import CryptoIndex from "./pages/CryptoIndex";
import AllContextProviders from "./store/AllContextProviders";
Its pretty common to have multiple imports in this way. Generally in teams i've worked with we try to keen it in alphabetical order and also separate imports from node-modules to imports from src files.
Actually, I think that is common. I don't know what IDE you're using and WebStorm, the IDE I'm using, allows programmers to fold these "import lines".

Javascript ES6 modules name resolution

I'm absolutely sure, that I'm asking a silly question, but I really do not understand how this line of code works
import React from 'react';
My question: who and where searches for 'react' name?
For example, this site tells me, that for module-name I should use relative of absolute path, e.g
import React from './react';
or
import React from '/home/user/react';
I thought that 'react' is same as './react' but I've created ReactJS applcation via create-react-app command and didn't find any file named react.js in application folder.
So, obviously there is some tool or rule by which module name has been resolved to a proper file, but I cannot find proper documentation about this.
Import statements are importing packages by name from the node_modules directory in your app, which is where they're saved when you run an installation command such as npm install or yarn inside your app.
When you write:
import React from 'react';
As far as you're concerned, it's as if you'd written:
import React from './node_modules/react/index.js';
Importing by package name means you don't have to be aware of how a given package is structured or where your node_modules directory is relative to your javascript file.

why can't I use import/export code in JSX files visual studio

I have a React app with dozens of files and I don't use any import / export statements. I have a _references.js file that helps intellisense reference components to each other.
I'm looking for a WYSIWYG component to use in my app but all examples show import statements like this:
import { Editor } from 'react-draft-wysiwyg';
When I type this in my JSX file I get:
JSX illegal import declaration
Do I have to configure Visual Studio (2015) differently in order to use this? What is the deal with this syntax and what are the rules around using it?
I am using react for .net so I assume this is what prevents imports from working... but if that is true, then what is the workaround?

Categories

Resources