Develop Reference

Typescript: resolve relative import path when using symlinks

This seems like a dumb question, but I struggle to find the answer.
The situation
Here is my folder structure:
myProject/
├── module1/
│ ├── config.ts
│ └── init.ts #symlink
├── module2/
│ ├── config.ts
│ └── init.ts #symlink
└── symlinks/
└── init.ts # the real not duplicated file
The file init.js import local files like so:
import config from './config'
// ...
The problem
The problem is that typescript throws Cannot find module './config' or its corresponding type declarations
I tried playing with typescript option preserveSymlinks but it didn't solve my problem
I know about other ways to achieve my goal but it's overkill for just one file and it doesn't solve relaying on a relative path (like creating a npm module, creating a function and pass relative file content as parameter or even generating files at runtime...)
=> I am working with typescript in a monorepo.
Is it possible to use symlinks this way? If no, are there other (simple) alternatives?

React best practice: component in separate file or component in separate folder with located in index.js?

I am not sure where to find info about folder/file naming conventions so, I'm going to post it here, hoping this question will make sense. In my previous job I came across two component naming options (used for building components / sub-components / etc in a React project).
Options:
Option A:
.
├── components/
│   └── SubComponent/
│   ├── SubComponent.js → // export default function SubComponent(){ return <></> }
│   └── index.js → // export { default } from './SubComponent'
└── App.js → // import SubComponent from './components/SubComponent'
Option B:
.
├── components/
│   └── RandomSubFolder/
│   └── ComponentName.js → // export default function ComponentName(){ return <></> }
└── App.js // import ComponentName from './components/RandomSubFolder/ComponentName'
To Sum Up:
In both cases we are talking about a large number of components, sub-components, sub-sub-components and so on.
I know index.js ( which allows a simple import based on its parent foldername ) adds noise but is it the case that Option A is preferred for its simplicity despite this or Option B ( which relies of filename )?

Vue App structuring

I am currently trying to build my first webapp using vue.js
Now 2 days of tutorials deep I am still not 100% sure how to structure a basic application.
Using the vue-cli and webpack already makes a nice structure, including a /src Folder with components and a /router Folder for routing.
Now my plan is to create a ToDo App. I want to dynamically switch between [show todos] and [add todo], which is just a form with a submit button.
I have already achieved it by using it without components and the cli.
My structure would be:
App.vue -> buttons with the two router-link to components/ShowTodos.vue & components/AddTodos.vue
components/ShowTodos.vue -> Table including the todo list
components/AddTodos.vue -> Form with submit button
Now the routing part works, I am able to switch between those two components.
Now 2 Questions:
How can I push the information from the form in the AddTodos component into an Array in the ShowTodos component in order to loop through there ?
Is this a proper way to structure an vue app, and if not how can I improve it ?
Thank you very much.
This is the first time for me using a component based JS Framework, so its pretty hard to follow along.

On structuring your vuejs application , this can be helpful
app/
moduleA/
components/
index.js
routes.js
moduleB/
components/
index.js
routes.js
index.js
routers.js
main.vue
router/
components/ -> shared
main.js
// app/routes.js
import { routes as moduleA } from './moduleA'
import { routes as moduleB } from './moduleB'
export default [ ...moduleA, ...moduleB ]
// app/moduleA/index.js
export { default as routes } from './routes'
// app/moduleB/index.js
export { default as routes } from './routes'
// app/index.js
export { default as routes } from './routes
'

About the second question, I did some researches, and that's what I recommend:
.
├── app.css
├── App.vue
├── assets
│ └── ...
├── components
│ └── ...
├── main.js
├── mixins
│ └── ...
├── router
│ └── index.js
├── store
│ ├── index.js
│ ├── modules
│ │ └── ...
│ └── mutation-types.js
├── translations
│ └── index.js
├── utils
│ └── ...
└── views
└── ...
Read more here: https://medium.com/#sandoche/how-to-structure-a-vue-js-project-eabe75161882

I can recommend this boilerplate. It has a very good structure and I am now using it in every project.
/components
/layouts
/mixins
/pages
/routes
/services
/store
/transformers
He also explains the structure very well. https://github.com/petervmeijgaard/vue-2.0-boilerplate#structure

Setting up react-bootstrap simple app

I am setting up a getting-started app using react-bootstrap + requirejs + bower + php ( not nodejs). Very new to this spectrum of tools. so here is my app:
.bowerrc
{
"directory": "javascript/components/",
"analytics": false,
"timeout": 120000
}
bower.json
{
"name": "hello-react-bootstrap",
"version": "1.0.0",
"dependencies": {
"requirejs": "*",
"react": "~0.13.1",
"react-bootstrap": "~0.20.0"
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
<!-- Require Js -->
<script data-main="javascript/setup.js" src="javascript/components/requirejs/require.js"></script>
</body>
</html>
javascript/setup.js
requirejs.config({
baseUrl: "javascript/components",
paths: {
"app": "../app",
'classnames':'classnames/index',
'jquery': 'https://code.jquery.com/jquery-2.1.3.min',
'react':'react/react',
'react-bootstrap':'react-bootstrap/react-bootstrap'
}
});
require.config({
urlArgs: "bust=" + (new Date()).getTime()
})
requirejs(["app/main"]);
javascript/app/main.js
//empty for now
application structure
── bower.json
├── index.html
├── javascript
│   ├── app
│   │   └── main.js
│   ├── components
│   │   ├── classnames
│   │   ├── react
│   │   ├── react-bootstrap
│   │   └── requirejs
│   └── setup.js
└── styles
I tried sth like this:
app/main.js
define(['react-bootstrap'], function(ReactBootstrap){
var React = require('react');
var Button= ReactBootstrap.Button;
React.render(Button,document.body)
});
which gives me :
Error: Invariant Violation: React.render(): Invalid component element. Instead of passing a component class, make sure to instantiate it by passing it to React.createElement.
Edit
Disregard my question following is working for me :
app/main.js
define(['react-bootstrap'], function(ReactBootstrap){
var React = require('react');
React.render(React.createElement(ReactBootstrap.Button,{bsStyle:'info'},'Hello World' ), document.body)
});

If you want to use JSX syntax in your main.js, you have to compile it. Otherwise, you only can use the React API to create your element, such as React.createElement. The react starter guide covers the concept.
I suggest you can use Babel which is already adopted in the official react repository to transform your code. Install the babel as a CLI: npm install -g babel. Let's say you put all your js in app/ folder, and execute babel app --out-dir build. It means you scan all js files under app folder and transforms them to build/ folder.
Then, modify your entry point path in javascript/setup.js. Change requirejs(["app/main"]); to requirejs(["build/main"]);. It includes the transformed js files.
If you want to apply ES2015 (a.k.a ES6) to write better js, just add params to the babel CLI to compile the ES2015 modules to the module system you use. You use RequireJS, so the command will be: babel src --out-dir build --modules amd.

How to optimize all javascript files in a directory with requirejs

I have a folder structure like this:
.
├── autocomplete
│   ├── core.js
│   ├── search.js
│   └── user.js
├── build.js
├── collapsible_lists.js
├── griffgrabber
│   ├── canvasobject.js
│   ├── cargame.js
│   ├── car.js
│   ├── griffDrawer.js
│   ├── keylistener.js
│   ├── run.js
│   └── victim.js
├── main.js
├── newsfeed.js
├── require.js
├── shortcut.js
└── sidebar.js
3 directories, 20 files
main.js is the startup file. That file requires a couple of the files, but not all of them. The rest of the files are included with
<script>
require(['shortcut'], function(shortcut){
// ...
})
</script>
in some html files.
This is my build.js file so far:
{
baseUrl: ".",
name: "main",
out: "main-built.js",
}
But it only includes the files that are required by main.js. Is it possible to optimize all the javascript files in one run?

(to expand #Ryan Lynch's suggestion):
Use the include option, as per the documentation:
You can always explicitly add modules that are not found via the optimizer's static analysis by using the include option.
(http://requirejs.org/docs/optimization.html)
{
baseUrl: ".", // ?
appDir: ".", // ?
dir: "output/",
modules: [
{
name: "main",
include: [ "shortcut" ]
}
]
}
More detailed example in the excellent example.build.js (I actually find it more useful than the documentation page)
(sorry, had no time to replicate and test properly to make sure the paths values are correct, I'll try that later and update my answer)

Try including a modules array in your options, so:
{
baseUrl: ".",
out: "main-built.js",
modules: [
{
name: "main"
}
]
}
As per the documentation:
In the modules array, specify the module names that you want to
optimize, in the example, "main". "main" will be mapped to
appdirectory/scripts/main.js in your project. The build system will
then trace the dependencies for main.js and inject them into the
appdirectory-build/scripts/main.js file.

Another - less orthodox - way of achieving this would be to add this "shortcut" module as a dependency to any of the "visible" modules that are discovered by r.js scanning (i.e. "main.js"). This way the entire dependency branch starting at "shortcut" would be included in the output.