barbar / vortigern Goto Github PK

When writing applications it is often that you find code that is written in JavaScript instead of Typescript.

Would it be possible to include an example component written in plain JavaScript? I tried this with a component as follows:

src/app/components/MyComponent/MyComponent.jsx:

import * as React from 'react';

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <h1>Hello from MyComponent</h1>
        );
    }
}

export { MyComponent };

and included it in the file src/app/components/index.tsx as follows:

export { Header } from './Header/Header';
export {MyComponent } from './MyComponent/MyComponent';

But i keep getting the error:

ERROR in ./src/app/components/index.tsx
(2,28): error TS2307: Cannot find module './MyComponent/MyComponent'.

Another thing is using existing ReactJS libraries, like https://onsen.io/v2/react.html. How we leverage these existing libraries without writing type definition files?

When using background image in CSS, e.g:

.home {
    text-align: center;
    background: url('./barbar.png')
}

the compiled CSS seems to resolve the asset fine, however the browser is trying to load it relatively to the blob:// css file which was injected to the HEAD causing an incorrect host name by Chrome

https://github.com/acdlite/flux-standard-action

interface Action {
  type: string;
  payload: Object;
  error: boolean; // we actually use it as an error message object on inside projects
}

I'm noticing a flicker on the screen when loading a new page with caching disabled. I think it's because when the server side renders the page it does not include styles. Eventually, when the styles are downloaded the elements are repositioned to their correct locations. It would be better to include the styles with the server side rendering so there is no flicker.

I found a package that appears to solve this problem called isomorphic-style-loader. It appears to be a replacement for style-loader. https://github.com/kriasoft/isomorphic-style-loader. Would people be open to this upgrade?

which has tests made with fetch-mock.

Including the internal project we are doing right now, upcoming vortigen-basic , vortigern-electron and Simpleserver/Riathamus, we'll have 5 TypeScript + React projects.

Is it time to pack common files in to a repository and publish it as a package?

Hello,
I wanted to give vortgern a try and did the following:

$ git clone https://github.com/barbar/vortigern
$ cd vortigern
$ npm run setup

everything worked so far.

Now I am getting an error when trying to start it:

$ npm start

Here is a screenshot of the console output:

I am using windows 10.
My node version is V4.4.3
My npm version is 3.8.2

I couldn't find anything on google regarding my issue. I hope you can help me. Thanks!

Cheers,
Raphael Hippe

Any reason not to use SCSS (or even LESS if you want)?

Sass SCSS seems to be the popular choice of CSS preprocessing in React projects.

I just cloned the repo. I ran npm install and it installed all the dependencies successfully. However when I ran npm start, it throws the following error:

-- /build/server.js:70 --
var manifest = webpack_require(!(function webpackMissingModule() { var e = new Error("Cannot find module "../build/manifest.json""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));
Error: Cannot find module "../build/manifest.json"

It looks like the manifest.json file isn't being created in the build folder.

Do you guys think I might I messed up while cloning, or missed a step?

Thanks.

we can discuss adding 3rd party libraries (I mean, other than the core ones) here, I suggest:

• classnames
• redux-thunk
• immutablejs 💂

@batuhan @ilgooz

while testing React components.

a counter maybe? 💂

When using develop branch - after running npm setup and npm start HMR logs are not visible, and hot/live reloads are not kicking in.

We are disabling tslint for a line in the client.jsx file. tslint will soon have an update for that. We should follow palantir/tslint#144

under pure windows w/o cygwin installed npm start is failed in package.json->scripts->clean, there is "clean": "rm -rf build/"

Hi I'll start by saying great starter kit! I'm really liking the Typescript. I've got this running on my dev machine and I'm trying to do a hot module replacement. It looks like the code is updated automatically on the client side, but the node server is not updated.

As a test, I edited Home/index.tsx and replaced "Hello" with "Hello2!", and then saved the file. At this point webpack builds and the browser is updated through HMR.

[HMR] connected
client.js:127 [HMR] bundle rebuilding
client.js:130 [HMR] bundle rebuilt in 2495ms
process-update.js:27 [HMR] Checking for updates on the server...
process-update.js:100 [HMR] Updated modules:
process-update.js:102 [HMR]  - ./src/app/containers/Home/index.tsx
process-update.js:107 [HMR] App is up to date.

When I refresh the page to trigger a server-side rendering I get the following error message:

warning.js:44 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) a-reactid="15">Hello2!</p></div></sectio
 (server) a-reactid="15">Hello!</p></div></section

It appears that the server has the older version of the file. The only way I found to update it is by restarting the server. Does hot reloading on the server side work for other people? If so, it might be something wrong about my system configuration that I should investigate. If this is not supported, should we consider adding it?

Hi @altayaydemir,

What about the unit test for every component. I have seen the test structure prepared for ts but not seen for every component-specific ones.

Thanks.

Keep cool.

that contains styleguide & coding standards for ts + react specific cases

typescript
https://charleslbryant.gitbooks.io/hello-react-and-typescript/content/
https://basarat.gitbooks.io/typescript/content/
https://github.com/Lemoncode/react-typescript-samples

connect --> container
https://github.com/rangle/typescript-react-redux-starter/blob/master/src/containers/counter-page.tsx

modular redux with interfaces and etc
https://github.com/tkqubo/typescript-react-redux-seed/tree/master/client/redux

testing
http://redux.js.org/docs/recipes/WritingTests.html
https://github.com/rwieruch/favesound-redux/tree/master/src/reducers

when running npm run build:prod and trying to run the server.js file inside the build folder i get this message:

Error: ENOENT: no such file or directory, stat '/Users/username/projects/vortigern/build/favicon.ico' at Error (native) at Object.fs.statSync (fs.js:892:18) at favicon (/Users/username/projects/vortigern/node_modules/serve-favicon/index.js:64:15) at Object.module.exports.config.env (/Users/username/projects/vortigern/build/server.js:97:10) at __webpack_require__ (/Users/username/projects/vortigern/build/server.js:21:30) at module.exports.Object.assign.i (/Users/username/projects/vortigern/build/server.js:41:18) at Object.<anonymous> (/Users/username/projects/vortigern/build/server.js:44:10) at Module._compile (module.js:425:26) at Object.Module._extensions..js (module.js:432:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:313:12) at Function.Module.runMain (module.js:457:10) at startup (node.js:138:18) at node.js:974:3

I'll convert barbar/riothamus to TypeScript and couldn't decide if I should push the Electron-specific edits back to Vortigern or fork Vortigern to create another boilerplate for Electron.

Any ideas?

I love what you've done here with React and Typescript.
One major challenge I have is integrating this with react-toolbox. http://react-toolbox.com/

Once I add react-toolbox, app fails to build. Any help would be great.

with a proper explanation...

I'm getting the following error:

warning.js:44 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) om MyComponent</h1><ons-button data-reac
 (server) om MyComponent</h1></div></section>

It is clear that what is rendered at server side is not equal to what was rendered at client side.

What I did was including an existing ReactJS component library called react-onsenui (see https://onsen.io/v2/react.html).

I added to both the client.tsx file and the server.tsx file the following lines:

require('onsenui/css/onsenui.css');
require('onsenui/css/onsen-css-components.css');
require('onsenui');

and in the Home.tsx container I did:

import * as React from 'react';
const s = require('./style.css');

const Button = require('react-onsenui').Button;

class Home extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.handleButtonClick = this.handleButtonClick.bind(this);
  }

  handleButtonClick() {
    console.log("CLICKED");
  }

  render() {
    return (
      <div className={s.home}>
        <img src={require('./barbar.png')} />
        <p>Hello world!</p>
        <Button onClick={this.handleButtonClick}>MY BUTTON</Button>
      </div>
    );
  }
}
export { Home }

What do I need to do to keep client and server rendering in sync?

Hi @altayaydemir, can I take out the server part of things and use this without requiring express.js. If possible please how.

with karma, mocha and chai.

here's a good example --> https://medium.com/@fay_jai/getting-started-on-testing-with-typescript-reactjs-and-webpack-a45a72f4f603#.58dhvtb1w

only for styles written within the app directory, otherwise we may have to deal with vendor css problems.

I use nested classes in some of my css files like this:

.foo { & .nested {} }

and in the tsx file i use it like this:

`const s = require('./style.css');

div className={s.nested}
`

it runs smoothly in dev mode, but all of these classes disappear from the css after the build

This is a suggestion. I was able to use TypeScript for webpack config and server side code and I think this project should do it too!

Take a look at my project:

https://github.com/rah-foundation/website

Skip. Sorry

instead of having postcss plugins like precss, autoprefixer and postcss-scss separately, we can use cssnext