Giter Club home page Giter Club logo

oc-hub's Introduction

oc-hub

This repository has been created as a central hub for all the OpenComponents built by Mattia Richetto.

How to SSR

git clone https://github.com/mattiaerre/oc-hub.git
cd oc-hub/
yarn
cd oc-with-react/
yarn
cd ..
yarn start

You should now have the OpenComponents registry running on localhost:3030

Then open another iTerm tab and change directory to how-to-ssr/

cd oc-hub/how-to-ssr/
yarn
yarn start

You should now have the Express app running on localhost:3000

If you view source you will see that the last component that uses React has been server side rendered

Other resources

oc-hub's People

Contributors

mattiaerre avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

matteofigus themoch

oc-hub's Issues

error when trying to publish oc-feedback-form

When I try to publish the oc-feedback-form component to https://pink-pineapple.herokuapp.com/ registry I get the following error:

➜  oc-hub git:(master) oc publish oc-feedback-form
Packaging -> /Users/mrichetto/projects/oc-hub/oc-feedback-form/_package
(node:9716) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Time: 626ms
    Asset     Size  Chunks             Chunk Names
server.js  2.78 kB       0  [emitted]  main

undefined:1542
    throw new JS_Parse_Error(message, filename, line, col, pos);
    ^
Error
    at new JS_Parse_Error (eval at <anonymous> (/Users/mrichetto/.nvm/versions/node/v6.9.5/lib/node_modules/oc/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1534:18)
    at js_error (eval at <anonymous> (/Users/mrichetto/.nvm/versions/node/v6.9.5/lib/node_modules/oc/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1542:11)
    at croak (eval at <anonymous> (/Users/mrichetto/.nvm/versions/node/v6.9.5/lib/node_modules/oc/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2089:9)
    at token_error (eval at <anonymous> (/Users/mrichetto/.nvm/versions/node/v6.9.5/lib/node_modules/oc/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2097:9)
    at unexpected (eval at <anonymous> (/Users/mrichetto/.nvm/versions/node/v6.9.5/lib/node_modules/oc/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2103:9)
    at expr_atom (eval at <anonymous> (/Users/mrichetto/.nvm/versions/node/v6.9.5/lib/node_modules/oc/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2630:9)
    at maybe_unary (eval at <anonymous> (/Users/mrichetto/.nvm/versions/node/v6.9.5/lib/node_modules/oc/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2792:19)
    at expr_ops (eval at <anonymous> (/Users/mrichetto/.nvm/versions/node/v6.9.5/lib/node_modules/oc/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2827:24)
    at maybe_conditional (eval at <anonymous> (/Users/mrichetto/.nvm/versions/node/v6.9.5/lib/node_modules/oc/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2832:20)
    at maybe_assign (eval at <anonymous> (/Users/mrichetto/.nvm/versions/node/v6.9.5/lib/node_modules/oc/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2856:20)

not sure why; any idea @matteofigus?

packaging component(s) failed

Description

it is no longer working the packaging of some components, I presume the ones using React, as I've got the following error when I try to run npx oc dev . 3030:

Packaging components...an error happened while packaging /Users/mrichetto/projects/oc-hub/oc-my-next-run: ./oc-my-next-run/server.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (26:29)
  24 |   };
  25 |   const props = { model };
> 26 |   const app = renderToString(<App {...props} />);
     |                              ^
  27 |   const sheet = new ServerStyleSheet();
  28 |   const css = sheet.getStyleTags();
  29 |   callback(null, {
BabelLoaderError: SyntaxError: Unexpected token (26:29)
  24 |   };
  25 |   const props = { model };
> 26 |   const app = renderToString(<App {...props} />);
     |                              ^
  27 |   const sheet = new ServerStyleSheet();
  28 |   const css = sheet.getStyleTags();
  29 |   callback(null, {
    at transpile (/Users/mrichetto/projects/oc-hub/node_modules/babel-loader/lib/index.js:65:13)
    at /Users/mrichetto/projects/oc-hub/node_modules/babel-loader/lib/fs-cache.js:118:18
    at ReadFileContext.callback (/Users/mrichetto/projects/oc-hub/node_modules/babel-loader/lib/fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:420:13)
Retrying in 10 seconds...

any idea what this could be @matteofigus @nickbalestra ?

  • npx oc --version: 0.44.12

  • node -v: v8.11.3

Ideas for `https://github.com/opentable/oc-testing`

Description

I really enjoy working w/ Jest nowadays and I believe that is a very good choice for testing JavaScript both client and server side; I've created this repo that I am using in order to collect the components that I am building and I would like to share w/ you oc-timeago.

As you can see there is a server.spec.js file containing tests asserting against the model; I'd love to use the same approach in order to refactor the oc-testing repository that uses at the moment mocha & chai instead of Jest.

If you think this is a good idea I will proceed as soon as possible w/ a PR.

P.S. is it possible to have moment available at the https://oc-registry.herokuapp.com/ registry so that we will be able to have a running version of the oc-timeago component? Thanks!

// cc @matteofigus @nickbalestra

OC ❤️ React SSR

@gregoryStarr I added a "How to SSR" section in the README.md with which you will be able to run an Express app that server-side renders 3 OpenComponent and one of them is built w/ React and does server-side rendering as well; let me know if you think this makes sense to you.

// cc @matteofigus @nickbalestra

check APOD media type

sometimes the APOD is a video instead of an image; make sure to set the background url only for the proper media type

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.