I would like to specify my own custom breakpints. The documentation as https://styled-system.com/responsive-styles/#using-objects only refers to theme.js.
But I don't understand where do I place theme.js? or find it? and how do I import it into the project? and how do I define breakpoints with aliases and use plain objects as values.?
Can someone please guide me? I am using styled-system in Gatsby.js
You simply need to export a key called breakpoints. In my project we use a js file to define our theme, it looks like this
export const breakpoints = ['769px', '1367px'];
Since you are using Gatbsy, you need to install gatsby-plugin-theme-ui. Your theme file will be src/gatsby-plugin-theme-ui/index.js.
Related
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.
Here is a file named tableau.js without npm package. I want to use it in my project? However, I cann't solve this problem. Please help me and show me correct ways. Thanks!
You need to use export module to export variables and functions from a file to another. Import your stuff to your main file. See https://www.sitepoint.com/understanding-module-exports-exports-node-js/
You could also use http://www.tutorialsteacher.com/nodejs/nodejs-module-exports
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
I want to import a normal javascript module (e.g. vhost) into my node.js typescript file using CommonJS.
I can do this with the following line:
import vhost = require('vhost')
We assume that I can't find a .d.ts file on the internet, but I also don't want to write it by myself, so I just use the vhost variable without intellisense.
The compiler complains and complains:
How can I tell that I just want it to be 'dynamic' (like the C# dynamic keyword or 'var' in normal javascript) and use all of the things in the picture above?
I could create a vhost.d.ts file, but I don't know what to write in there:
declare module 'vash' {
// what to write here?
}
I found this out while typing the question, it was so easy that it is almost embarrassing, but maybe somebody has this problem too.
Just use var instead of import:
I'm looking for a solution to use __dirname (or equivalent) inside a TypeScript class compiled in AMD, __dirname doesn't exists there. And because it's typescript, I can't (or I don't know how) import module that contains uri, allowing me to get the uri.
I found the solution once, but I don't remember how and I can't find it again so far.
I took a look to this, but it's in pure javascript and I use typescript, I tried to import module, but I get a TS error.
https://stackoverflow.com/questions/9027429/how-to-use-nodejs-global-module-objects-in-requirejs-modules
One solution is to:
In app.js, create a global var:
__basePath = __dirname;
Then, in the AMD script, use __basepath + 'relativePathFromBasePath' to load the file.
I know I found another solution but I cannot remember how.
I do not use TypeScript, but on the basis of the TypeScript code I've seen and on the basis of what I know of RequireJS, I believe you should be able to access module.uri like this:
import module = require("module");
console.log(module.uri);
The name module is special. You could also use require.toUrl(<module name>) (that's Url as in URL whereas the variable above is uri as in URI) but it does not seem as useful as module.uri for this task. For one thing you'd have to include the module's name in the call.
module.uri may contain .., so it needs cleaning up. I understand your code to be running server-side, so in Node.js we'd call path.dirname(path.normalize(module.uri)).