I am confused by something on the react-redux documentation
https://redux-docs.netlify.com/recipes/configuring-your-store/
specifically, in attempting to build the prototype app (which is provided here https://github.com/reduxjs/redux/tree/master/examples/todos/src), I am confused about the line
import rootReducer from './reducers'
what is confusing is that in the app directory, there is no such file reducers.js, there is only a folder reducers/ which contains
index.js
todos.js
todos.spec.js
visibilityFilter.js
I see no file for rootReducer, so I am assuming (correctly?) that the ES6 syntax for the above code is importing the default export from
reducers/index.js
is that correct?
In that file, I see
export default combineReducers({
todos,
visibilityFilter
})
do I understand correctly the defaulted export anonymous function, exported from reducers/index.js, is then imported into index.js as rootReducer ?
Yes. That's ES6 "default export" syntax, combined with an index.js file. When an index.js file exists in a folder, you can specify just the folder name in the import statement, and the bundler knows to look at index.js automatically.
Related
I am trying to migrate to Nx and setup a monorepo.
Currently running into issues with path alias imports.
#backend/kernel": ["libs/kernel/src/index.ts"],
#backend/kernel/*": ["libs/kernel/src/*"]
When issuing imports of the form
import { Something } from "#backend/kernel".
On the other hand, when doing imports that go deeper,
import { SomethingElse } from "#backend/kernel/somewhere/deeper" I get TS2307 when compiling. No issues in VSCode; all types are correctly resolved.
Anybody has some advice?
Have you export the code correctly from your lib in the root index of your library ?
If not, at the index.ts at the root of your library, just export your code like this :
export { Something } from 'your/path'
or if you already export inside your library you can use a wildcard *.
After that, remove the line
#backend/kernel/": ["libs/kernel/src/"]
from your tsconfig.base.json
Cheers
We're using Cypress for testing an app build with Create React App, and our CRA app is setting a custom import path in .env – NODE_PATH=src/ – so that we can import files "absolutely", e.g. import Foo from 'components/Foo' vs. import Foo from '../../components/Foo'
The problem is, if we import one of the files from our CRA into a Cypress test, and the imported file includes something like import routes from 'lib/routes' Cypress doesn't know how to process that path and the import fails.
Example
Let's say we have the following files:
/cypress/integration/test.js
import routes from '../../src/lib/routes';
// Tests here…
/src/lib/routes.js
import { routeHelpers } from 'lib/routes';
// Routing code here
In this scenario, when /cypress/integration/test.js imports /src/lib/routes.js it will encounter the absolute import of 'lib/routes' and have no idea how to resolve that path.
Is there a way to set custom paths for Cypress to include when searching for imports in this way? In the case of this arbitrary example, it would mean telling Cypress to use src as a directory to resolve imports from.
Easiest solution for this turned out to be simply running the cypress commands with NODE_PATH=src. So my package.json was simply updated to the following:
"scripts": {
"cypress:open": "NODE_PATH=src cypress open",
"cypress:run": "NODE_PATH=src cypress run",
},
I had a similar issue and I was using .env with NODE_PATH=src
Solution: I removed .env and created jsconfig.json for absolute imports.
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
This is the recommended approach in the CRA docs: https://create-react-app.dev/docs/importing-a-component/#absolute-imports
This question is a follow up to an earlier question of mine. I've closed the question so I hope its okay that I ask a fresh but related question here. Go: embed static files in binary
How do I serve JS files with go-bindata? Do I pass it into html like this
hi.html
<script>{{.Bindata}}></script>
Doesn't seem to work even though I have no compile or JS errors.
Using https://github.com/elazarl/go-bindata-assetfs
Assuming you have the following structure:
myprojectdirectory
├───api
├───cmd
├───datastores
└───ui
├───css
└───js
Where ui is the directory structure you'd like to wrap up and pack into your app...
Generate a source file
The go-bindata-assetfs tool is pretty simple. It will look at the directories you pass to it and generate a source file with variables that can contain the binary data in those files. So make sure your static files are there, and then run the following command from myprojectdirectory:
go-bindata-assetfs ./ui/...
Now, by default, this will create a source file in the package main. Sometimes, this is ok. In my case, it isn't. You can generate a file with a different package name if you'd like:
go-bindata-assetfs.exe -pkg cmd ./ui/...
Put the source file in the correct location
In this case, the generated file bindata_assetfs.go is created in the myprojectdirectory directory (which is incorrect). In my case, I just manually move the file to the cmd directory.
Update your application code
In my app, I already had some code that served files from a directory:
import (
"net/http"
"github.com/gorilla/mux"
)
// Create a router and setup routes
var Router = mux.NewRouter()
Router.PathPrefix("/ui").Handler(http.StripPrefix("/ui", http.FileServer(http.Dir("./ui"))))
// Start listening
http.ListenAndServe("127.0.0.1:3000", Router)
Make sure something like this works properly, first. Then it's trivial to change the FileServer line to:
Router.PathPrefix("/ui").Handler(http.StripPrefix("/ui", http.FileServer(assetFS())))
Compile the app
Now you have a generated source file with your static assets in them. You can now safely remove the 'ui' subdirectory structure. Compile with
go install ./...
And you should have a binary that serves your static assets properly.
Use https://github.com/elazarl/go-bindata-assetfs
From the readme:
go-bindata-assetfs data/...
In your code setup a route with a file server
http.Handle("/", http.FileServer(assetFS()))
Got my answer here: Unescape css input in HTML
var safeCss = template.CSS(`body {background-image: url("paper.gif");}`)
I'm stuck on running the BeeGO app using "bee run" it says
The thing is I've already have setup properly my GOPATH to D:/Web Dev/GO/BeeGO/test-project/
and also routers path does exist and I've tried to manual build the file but it doesn't generate an .exe file.
Anyone knows how to fix this?
I'm using Windows 8.1 Pro (64-bit)
Thanks
GO expects the directory structure under $GOPATH in following ways as described in code organization:
$GOPATH/src <--- where your source code goes
/pkg
/bin
Instead of placing your source files directly under $GOPATH (D:/Web Dev/GO/BeeGO/test-project/ for your case), you want to move your code under $GOPATH/src.
D:/Web Dev/GO/BeeGO/test-project/src/main.go
D:/Web Dev/GO/BeeGO/test-project/src/quickstart/routers/routers.go
D:/Web Dev/GO/BeeGO/test-project/src/quickstart/controllers/controllers.go
import path should be always starting from $GOPATH/src. routers.go can be always imported as import "quickstart/routers" and controllers.go can be imported as import "quickstart/controllers".
That's not how you import a package.
The import path is relative to $GOPATH/src. use:
import "quickstart/routers"
Finally fixed the bug from the framework,
What I did:
in main.go import from
"D:/Web Dev/GO/BeeGO/test-project/quickstart/routers"
I changed it to _"../quickstart/routers" make sure to include _ this means to import the library even if it is not used,
Then in the routers/router.go I changed the import path
"D:/Web Dev/GO/BeeGO/test-project/quickstart/controllers" to "../controllers"
It seems BeeGO doesn't generate the template properly and caused the build to fail.
Another possiblity for this error, is when you copy-paste code from the internet,
and
import "quickstart/routers"
became
import "quickstart/routers "
due to bugs in some CMS/Blog systems (notice the space at the end before the closing quote...).
Does anyone know if there is a way to combine multiple SASS/SCSS files into one SASS/SCSS file. I do mean "into one SASS/SCSS" and not into a CSS file.
For example, I have 3 scss files:
app.scss
base.scss
layout.scss
The app.scss file contains 2 imports to base.scss and layout.scss.
I would like to beable to generate 1 SCSS file that basically concatenates the files and does not process the sass.
It's fairly difficult to search for as everything that gets return is to do with combining into CSS.
Why would I want to do this? Basically, I'd like to easily reference a set of SCSS files from within a codepen (other online code editor).
Thanks
I analyze all files by the mask, find all imports inside and concatenate into one file. So I don't need one entry point
npm install -D bundle-scss
"script": {
"postbuild": "npm run themes",
"themes": "bundle-scss -m \"./src/**/*.theme.scss\" -d \"./dist/themes.scss\""
}
scss-bundle solves this problem
https://github.com/reactway/scss-bundle
Caution: Does not support newer module based imports. Issue #90
You could modify this for javascript. Kept it in typescript as I am currently solving this issue on my own (angular 6 library), and ran into this question.
According to the docs, angular material uses this implementation.
import * as path from 'path';
import { Bundler } from 'scss-bundle';
import * as fs from 'fs';
(async () => {
// Absolute project directory path.
// Assuming all of your scss files are in `./projects/my-library/src/styles`
const projectDirectory = path.resolve(__dirname, './projects/my-library/src/styles');
const bundler = new Bundler(undefined, projectDirectory);
// Relative file path to project directory path.
// The name of your file here would be `app.scss`
// Kept this here if anyone runs into this answer and wants to do this with the new angular 6 library.
const { found, bundledContent } = await bundler.Bundle('./_all-theme.scss');
if (found && bundledContent) {
// where you want to save the file, and what you would like it to be called.
const location = path.resolve(__dirname, '_theming.scss');
fs.writeFileSync(location, bundledContent);
}
})();