nightwolfz / inferno-starter Goto Github PK

Hi @nightwolfz ,
after running npm install to install packages, i ran npm run dev and got the error below

                        props.map(({ astName, astValue, astSpread }) =>
                                   ^

SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Module._extensions..js (module.js:405:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/user/Documents/Sycamore labs/Ajala3/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at /Users/user/Documents/Sycamore labs/Ajala3/node_modules/babel-core/lib/transformation/file/options/option-manager.js:174:20
    at Array.map (native)
[nodemon] app crashed - waiting for file changes before starting...```

I tried it on window10

• Signing out... stay on screen with this error into the console
  Unable to get property 'username' of undefined or null reference
• Login and Register are ok, but when I come back, my last todos are not there
  The database contains all the information, but todos are not shown in the page.
  maybe related to the bad logout
• need to tell people to launch mongodb (mongod) before 'npm run dev'

Thanks

Hi,

First of all, thank you very much for the awesome work you've done here !

I've been trying for many hours to make resolve alias work in webpack.base.config but couldn't.

I installed a react plugin "material-ui" and tried unsucceffuly to use resolve alias to make webpack point react imports to inferno-compat.

resolve: { alias: { 'core': path.join(__dirname, '../'), 'react': 'inferno-compat', 'react-dom': 'inferno-compat' }, },

Here is the error i get :
Error: Cannot find module 'react' at Function.Module._resolveFilename (module.js:470:15)

It's worth noting that resolve alias works with all my other projects using webpack

My understanding of onEnter is, that it will only run on Router Components. Is it possible to use it with childs further down the tree? I'd like to fetch some Icons and json data on the server side for SEO goodness.
When implementing onEnter in my Icon Component it will not be invoked.

// class Icon ...
static onEnter(props) {
        return props.data.getIcon(props.icon, props.color)
    }

// data Store..
@action async getIcon(slug, color) {
        const res = await request.get(`/icons/${slug}.svg`, 'svg')
        const colloredRes = await res.replace('fill="#000000"', 'fill="#' + color + '"')
        return runInAction(() => {
                this.icons.set(slug, colloredRes)
            })
      }

I'm using your request.js of the next-Tree

I assume manipulating the renderProps in server/middleware/render.js would be the right way?

An equivalent in function would be React Async Component but i'm afraid my knowledge is to limited for porting a library to inferno. Also I dislike inferno-compat because of performance- and size-sake (Or am I mistaken here?) .

What would you recommend?

So I log in from desktop Safari - the server allocates me my token, and everything is good. Now I go to my phone, and log in - so the token is created again and over-written in the db. Back to Safari and refresh the page...and of course I've been logged out. Not a bug - but a business logic issue. Would it be good (after a successful log in) to check for an existing token and re-use it for the 2nd device?

Is it worth baking csrf support into the stack? Easy to do in Express, and the csrf_token could be initially sent back with the state?

I’m using a different language to host our API. I ripped out mongo and the models and such but I’m not sure how to go about this. Should I fetch the account after initializing the stores as the method to do so is stored in there?

I’m also confused about what and the difference between a state and store are.

To be clear, this is a question. Not an issue.

I downloaded template, installed dependencies, but when i run "yarn dev" im get an error.

Also i want to know: will there be no isomorphism in the next release?
Thanks in advance.

I'm new in react like libraries, i'm using angular for 2 years now, and i was curious how to make even better and faster thing. (I have created many component of my own, i didn't like the template system, as it's growing the js size)

I'm not sure how react is working, but your app seems to me very big to me.

I have generated a source-map-explorer result by picking the build. (I have checked the prod version)
I have a feeling it's not minified, webpack can be configured better.

It would be very good, if there would be any comparison on the inferno site, regarding to the bundle size.

Looking at the angular the 404.js for example. It throws me that in prod mode the 400 bytes goes to 4KB somehow. Angular is more predictable in this way, if the template size is small, than you should get smaller result, but in this case i don't know what happens. I have used typescript and i have bigger templates on my android folder and the size is less or similar.

Don't forget i'm experienced, but i'm newbee in react like systems, and i have limited time to evaluate and change my mind. Thanks for your help. My question is related to what i'm missing out from the comparison on inferno main site. I have a 40 pages app and the size is about 100KB + angular 240KB.
I have rewritten ionic, which blown me up, as my js and css size was 2.5-3MB minified.

I'm investigating how to replace angular with some sort of virtual dom system. (I might consider only to pick up the idea, as i might not introduce "template" system, just using decorators, so especially going back to vanilla js on build size)

I haven't seen any official inferno forum, just github repository.

Ps.: I had to add babel-register to make this project build-able. I now that is an old project, so it touched inferno in the initial phase.

--

Including different ciphers

I noticed if I login / logout and then log back in I get this error every so often
SSR Enabled.

Uncaught (in promise) TypeError: Request method 'POST' is unsupported
at service.js:50
(anonymous) @ service.js:50

Also not sure if this is because of the service workers.
If I login / logout and select browse and goto the root path '/' then I see the todos page..
But it I ctrl f5 then it redirects back to login.

hi, didn't succeed with the starter.
db fixture needed ?

  app:forbidden TypeError: Token not provided
  app:forbidden     at /home/user/inferno-starter/src/server/routes/account.js:76:27

Thanks for sharing inferno-starter. It appears to be exactly what I am looking for.

However, I get this loading any page. Here is the stack trace. It appears to be due to inferno-devtools not being loaded in client.js before the first Inferno.render. If I move up the require, then the error goes away.

Uncaught TypeError: Cannot read property 'bind' of undefined
at createReactCompositeComponent (http://localhost:2002/build/bundle.js:3389:42)
at updateReactComponent (http://localhost:2002/build/bundle.js:3306:23)
at createReactCompositeComponent (http://localhost:2002/build/bundle.js:3393:29)
at updateReactComponent (http://localhost:2002/build/bundle.js:3306:23)
at createReactCompositeComponent (http://localhost:2002/build/bundle.js:3393:29)
at updateReactComponent (http://localhost:2002/build/bundle.js:3306:23)
at http://localhost:2002/build/bundle.js:3321:110
at Array.map (native)
at normalizeChildren (http://localhost:2002/build/bundle.js:3321:80)
at createReactDOMComponent (http://localhost:2002/build/bundle.js:3350:39)

Hi,
I noticed that Todos has redundant render. It happens even before browse actions starts, cant figure out how to avoid this.
Did some code to demonstrate: standy@c2c81a8

Steps to reproduce:

1. Login, make few todo
2. Switch to About
3. Refresh page
4. Move to Todos

Console shows 3 renders:

1. Empty list, loading: false (should be skipped)
2. Empty list, loading: true
3. Full list, loading: false

PS: Thank you for great tool, really intending to make my next project with this

Seems static onEnter launches only once per page load, document.title dont change when page change

I get an internal server error when opening inferno-starter in browser at localhost:2000 or localhost:2000/about. I cloned the repo, did npm install, and then npm run dev. Any tips?

Hi,

Thanks for making this starter project. I'm using it as a base for my first Inferno project and it is also the first time I use a 'react like' framework so I may be missing something obvious.

Here are my steps:

• cloned the repo
• $ npm install
• $ npm run dev

This works fine and I can play around with the app.

Then I set SSR to true in the config file, reload, and get the following error:

TypeError: Cannot read property 'sort' of undefined

Which comes from inferno-router. Any ideas?

Many thanks.

I had to add 2 missing dependencies to the package.json file. Production doesn't serve assets or build directory...

Can you reproduce? Dev seems to work fine

Get this error on console:

inferno-dom.js:337 Uncaught (in promise) DOMException: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.

and not showing todo-list when trying to log into the app. Refreshing page fixes the problem. Not sure if worth fixing but wanted to let you know :)

Hi,

I'm trying to build multiple layouts in router but no success so far :

return (
    <Route component={ Layout }>
        <Route component={ HomeLayout }>
            <Route path="/services" component={ Services }/>
        </Route>
        <Route component={ PlusLayout }>
            <Route path="/blog" component={ Blog }/>
        </Route>
    </Route>
)

/services render properly but /blog doesnt render the blog component. What's the problem ?

Could we get this updated to use the newest version of Inferno?

I have been enjoying the layout of inferno-starter. I think it would be good if it was an upgradable module rather than a template. I don't think it would take long to do, and I could take a couple of days to give it a shot. Any interest? Do you see any reason why that would be a bad thing?

I would stay with convention over configuration, which is pretty easy with webpack contexts.

Maybe something I did - will try tomorrow with latest updates.

When I run 'npm run prod' I get the following issues:

Uncaught (in promise) TypeError: Cannot read property 'push' of undefined
at isAuthenticated (bundle.js.download:19880)
at bundle.js.download:4209

Also socket connection requests keep trying to poll.
http://localhost:2002/sockjs-node/info?t=1484083399582 net::ERR_CONNECTION_REFUSED.

In dev if I add a reference to an image/font in the scss they do not load as webpack css conversion is on port 2002 but the site assets are on port 2000. Works fine when pushed to prod or if I put in the full domain/port - maybe there is a webpack setting for this - I will take a look.

Google released a better version of their sw-precache called Workboxjs. Should this be implemented?

Hi @nightwolfz
I would like to swap out koa for feathersjs for the backend. What steps do you recommend i take

It took a while, but I figured it out. Here is my service.js file the way it is now. The key was the part that deletes the old caches. You can see it in the answer here: http://stackoverflow.com/questions/37117933/service-workers-not-updating

I also threw in some extra debugging code while I was figuring it out. I also added the 'self.skipWaiting()' This solved an issue that I was seeing where the update was being held up by the service worker getting stuck in a waiting state. I found this on the MDN site describing the clients.claim() function.

I hope this might be helpful for others.

const DEBUG = false;

const CACHE_NAME = 'escape-1';

self.addEventListener('install', e => {
    function onCacheOpen(cache) {
        DEBUG && console.debug('Service cache');
        return cache.addAll([
            '/',
            '/build/bundle.js',
            '/build/bundle.css'
        ]);
    }

    e.waitUntil([caches.open(CACHE_NAME).then(onCacheOpen), self.skipWaiting()]);
});

self.addEventListener('activate', e => {
    DEBUG && console.debug('Service listener - activate');
    e.waitUntil([
        self.clients.claim().then(() => DEBUG && console.debug('Service listener - clients.claim')),
        caches.keys().then(function (cacheNames) {
            return Promise.all(
                cacheNames.map(function (cacheName) {
                    if (cacheName !== CACHE_NAME) {
                        DEBUG && console.debug('deleting', cacheName);
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    ]);

});

self.addEventListener('fetch', e => {
    e.respondWith(
        caches.match(e.request).then(response => {
            // Cache hit - return response
            if (response) {
                DEBUG && console.debug(`cache hit (${CACHE_NAME})`, e.request.url);
                return response;
            }

            // IMPORTANT: Clone the request. A request is a stream and
            // can only be consumed once. Since we are consuming this
            // once by cache and once by the browser for fetch, we need
            // to clone the response.
            let fetchRequest = e.request.clone();
            DEBUG && console.debug('fetch: ', fetchRequest.url);
            return fetch(fetchRequest)
                .then(cacheResponse)
                .catch(cacheResponse);

            function cacheResponse(response) {
                // Check if we received a valid response
                // Don't cache non-CDN requests
                const isInvalid = !response || response.status !== 200 || response.type !== 'basic';
                if (isInvalid) {
                    DEBUG && console.debug('Cache excluded:', e.request.url)
                    return response;
                }

                // IMPORTANT: Clone the response. A response is a stream
                // and because we want the browser to consume the response
                // as well as the cache consuming the response, we need
                // to clone it so we have two streams.
                let responseToCache = response.clone();

                caches.open(CACHE_NAME)
                    .then(function (cache) {
                        DEBUG && console.debug('caching: ', e.request.url);
                        cache.put(e.request, responseToCache);
                    });

                return response;
            }

        })
    );
});

When I try to npm run dev I get this error:

         const logger  = require('debug')
         ^
         SyntaxError: Identifier 'logger' has already been declared