Sometimes I see slightly different imports
import styled, { withTheme } from "styled-components/macro";
import styled, { withTheme } from "styled-components";
Since they have the same functionality I cannot understand the difference between them neither can google anything that could help.
In production styled-components generates unique hashes for css classes like .eeZmbc or .ZzNLl. These are used for saving space but are not useful for developers in development.
For semantic class names in development a babel plugin exists. It generates names like .Navbar__Item-sc-14eztoj-1 as in .FileName__StyledComponent-generatedHash to help us trace an element/style back to its source.
So if you use create-react-app you can use this plugin without ejecting and without adding it to babel config. You just have change your import from styled-components to styled-components/macro. A quick find-and-replace in you IDE will do the trick.
All the compile-time code transformation is handled by babel-plugin-macros
babel-plugin-macros defines a standard interface for libraries that want to use compile-time code transformation without requiring the user to add a babel plugin to their build system (other than babel-plugin-macros, which is ideally already in place).
Personally I add the babel plugins to the config file manually and use standard imports like styled-components.
Related
In Node you can make an importText function fairly easily, and then use it in another file like so:
import importText from 'importText'
const css = await importText('./someFile.css')
// (This isn't technically possible yet, but top-level await is coming someday)
By using Webpack or a similar tool, you can also do the same thing, only with a more convenient syntax:
import css from './someFile.css';
Node used to have a way to do the same thing without Webpack, but the API for it, "require extensions", was deprecated (emphasis added):
Deprecated. In the past, this list has been used to load non-JavaScript modules into Node.js by compiling them on-demand. However, in practice, there are much better ways to do this, such as loading modules via some other Node.js program, or compiling them to JavaScript ahead of time.
https://nodejs.org/api/modules.html#modules_require_extensions
My question is: what are the "much better ways"?
They mention "compiling them to JavaScript ahead of time", which I would assume is the Webpack approach. But how would one "load a module via some other Node.js program" ... or solve the problem any other way (the text I quoted implied those two weren't the only options)?
I am developing two npn packages:
https://github.com/euberdeveloper/mongo-scanner
https://github.com/euberdeveloper/mongo-cleaner
I want to document them by using typedoc. The index.js file is the one provided by the npm module and is obtained by index.ts.
I want to document only what is exported by the library index.ts. I can filter the non-exported things with the typedoc options.
The problem is that the index.ts import things from other TS files and export only some of them. For instance, it imports and re-exports some interfaces from the interfaces/index.ts and the errors classes from errors/index.ts, but imports without exporting the class Database from the utils/database/index.ts.
Being actually exported, things such that Database class are documented even if they are exported by a file different from index.ts.
How can I filter them?
The current #next version of typedoc has a --library mode. Seems that there are going to be big changes with the #beta version and the future 1.0.0 version, where the mode option will even disappear. Development seems to proceed extremely slow, so I think that the only way now is to use the (probably bugged) #next and #beta versions and wait.
Edit: the 0.20.x is no more beta and has been released, it works good, so the problem is solved
Is there a way to have custom behaviour for import statements in Python? How? E.g.:
import "https://github.com/kennethreitz/requests"
import requests#2.11.1
import requests#7322a09379565bbeba9bb40000b41eab8856352e
Alternatively, in case this isn't possible... Can this be achieved in a standard way with function calls? How? E.g.:
import gitloader
repo = gitloader.repo("https://github.com/kennethreitz/requests")
requests = repo.from_commit("7322a09379565bbeba9bb40000b41eab8856352e")
There are two reasons for why I would like to do this. The first reason is convenience (Golang style imports). The second reason is that I need cryptographic verification of plugin modules for a project. I'm using Python 3.x
What you're essentially asking is customization of the import steps. This was made possible with PEP 302 which brought about certain hooks for for customization.
That PEP is currently not the source from which you should learn how importing works; rather, look at the documentation for the import statement for reference. There it states:
Python includes a number of default finders and importers. The first one knows how to locate built-in modules, and the second knows how to locate frozen modules. A third default finder searches an import path for modules. The import path is a list of locations that may name file system paths or zip files. It can also be extended to search for any locatable resource, such as those identified by URLs.
The import machinery is extensible, so new finders can be added to extend the range and scope of module searching.
In short, you'll need to define the appropriate finder (to find the modules you're looking for) and an appropriate loader for loading these.
Say I have a directory structure like so.
Shapes
|__Square.ts
|__Circle.ts
|__Triangle.ts
And an example of Square.ts below which exports Square. From what I understand this makes it an external module.
Square.ts
export class Square {
constructor(private width: number, private height: number) {
}
}
Is there a way in TypeScript to import/export all Shapes defined in these files without having to specifically reference them.
Example Import: import * as Shapes from "./Shapes"
Example Export: export * from "./Shapes"
So far reading through GitHub issues and the available documentation on the TypeScript language or the tsc compiler I have been unable to find an answer to whether this is possible or not. In my particular case I'm interested in this behavior in Node.js which supports folders as modules and perhaps bundlers like Webpack may have a similar mechanism.
Related:
With latest TypeScript, you may not need Webpack
TypeScript Handbook - Splitting Across Files
https://github.com/Microsoft/TypeScript/issues/17
https://nodejs.org/api/modules.html#modules_folders_as_modules
I am currently working on a Node.JS project written in TypeScript using Node.JS Tools for Visual Studio (NTVS). I have a few classes and enums spread out in 3 or 4 files in my project. I am now trying to use the classes defined in those files from my main app file. From my previous work with Node, I know that I would normally need a require call to import each other file/class if I were working with a text editor and the command-line compiler. But, if I open any TypeScript file in my project and start typing the name of a class defined in a different file, Visual Studio shows IntelliSense autocomplete for the class name and its members. This makes me think that the NTVS and/or TypeScript configuration are automatically making all of my classes available project-wide. But if I click the 'run' button, errors are printed to the console because Node can't find the referenced classes at runtime.
This behavior leads me to believe that IntelliSense isn't actually telling me that the classes are available, just that they exist (which seems odd). If I add a require call to the top of the file, and use that imported value instead of the original class name, Node finds the class and I can use it in my code. But this presents two problems:
I must come up with a new name to use for the variable that I import the class into. If I require() it with the original name, Visual Studio shows errors saying that the identifier is a duplicate, because it seems to believe that the original class is available project-wide.
I don't get the autocomplete or type checking in my usage of the class. This pretty much defeats the purpose of using TypeScript.
So, what's the proper way to do this import? Is there a way to make all my classes available globally? If not, what import statements do I need?
This behavior leads me to believe that IntelliSense isn't actually telling me that the classes are available, just that they exist
unless you have top level import or export statement the file is considered a global module and is available project wide : http://basarat.gitbooks.io/typescript/content/docs/project/modules.html
A global module will not work at runtime in node.js
You should use file level modules using import/export and compile with --module commonjs