cyclejs-community / create-cycle-app

Create Cycle.js apps with no build configuration.

Cycle.js Community

This organization is a place for any Cycle.js project that welcomes collaboration. We welcome all types of projects, from drivers to games to documentation to art.

The official cyclejs organization contains the code for Cycle.js itself and the core libraries developers might use. (HTTP, DOM, etc). We're here for all of the cool stuff the community makes.

About our community

We are a welcoming, collaborative community. We believe that contributions should be encouraged and celebrated. We especially welcome those who feel like they might not be welcome, or able to help. Come one, come all.

We do not tolerate behaviour that makes other contributors feel harassed or unwelcome. Please see the code of conduct.

In short, don't be a dick and consider how others will perceive your actions. If you experience any negative interactions, please contact either @tylors or @widdershin and we will do our best to help. If in doubt, get in touch.

Getting involved

We welcome contributors of all levels of experience and from all different backgrounds.

We are liberal about membership. If you want to be a member, please open an issue on this repository and we will add you. 😄

As a member, you are welcome to create repositories in this community and to transfer your existing repos. The only criteria is that they're related to Cycle.js and that collaboration is welcomed.

The most straightforward way to contribute to a repository is to open a pull request. We ask that repositories in our community follow Github flow as using pull requests allows for more review, discussion and learning to take place.

When one of your pull requests is merged, you will be added as a collaborator to the repository. This allows for easier collaboration (as collaborators can work together on pull requests).

Being a collaborator means:

• You can push to the repo, and to branches.
• With the permission of the other collaborators, you can merge pull requests.
• You get to have a say in the development of the project.
• You have no obligation to contribute, but any work you do is very appreciated.
• You still work with pull requests, but now you work on the repo itself, not your fork. This makes it easier to collaborate.

Here is an automagically generated list of open, unassigned issues with a "Help Wanted" label. If you want to contribute but you're unsure what to work on, take a look at these issues and comment on any you're interested in.

cyclic-router

• #124 - Question: its possible to make a Link component?
• #95 - Component runs twice, isolated child components lose scope/namespace
• #32 - Provide a param observable instead of value

cycle-canvas

• #28 - Add more examples
• #16 - How to handle click events?

README

• #10 - Present to a JavaScript meetup in Edmonton, Canada

cycle-svg-pan-and-zoom

• #3 - Support touch events for panning and zooming
• #2 - Support other stream libraries
• #1 - Write tests

cycle-regl

• #1 - Clean up DOM when using container option upon re-running or Cycle .dispose() being called

create-cycle-app's Issues

port 8000 is not documented

The development server that start on npm start will listen on port 8000 but is not documented anywhere.

Please provide better instructions on how to add/install custom flavor

It is not really clear how to add/install a custom flavor. I asked same question here and looked at create-cycle-app-flavors and cycle-scripts but still not clear...

I wonder if your script can somehow find it by package.json keyword entry (like I've seen in Ember CLI f.ex) or if I have to install my flavor as a global module or what!?

Please make it more clear. Thanks

Flavor discover method

I think that at some point we should aim to bring the flavor-discovery mechanism within the create-cycle-app scope and not dependent on external gists? Would make it easier to maintain.

Any thoughts?

Rethinking scripts post take-off-training-wheels

While working ont he es6-webpack flavour I noticed that would be nice to be able to have a cleaner post take-off-training-wheels.js version of the scripts.

At the moment we simply move them in the .scripts folder and we reference them wihin the package.json scripts field.

Some of them could be simply rewritten as cli cmds within the npm script, together with some files being created whenever needed (i.e: .babelrc and webpack.config.js).

Once we have all the 4 basics flavours in place we can perhaps start thinking on how to improve this part of the experience.

GH urls

Fix various url scattered throughout the mono-repo to point to cyclejs-community/create-cycle-app (example).

Using ES6 on tests with the es6-browserify core flavor bug

Code to reproduce the issue:
Use import (or any other ES6 syntax) on app.test.js

Expected behavior:
It runs the tests

Actual behavior:
It fails due mocha is not configured to support ES6.

Versions of packages used:
N/A

Reported on #13
Was fixed for the es6-webpack core flavor in #15 similar solution need to be applied to es6-browserify pack

Linting

For the moment using standard, but prettier could be a nice alternative or companion to it.

cycle-scripts-ts-webpack fails on Windows 10 bash

Code to reproduce the issue:
create-cycle-app cycle-ts --flavor cycle-scripts-ts-webpack

Expected behavior:
Successfully finish initialization

Actual behavior:

/mnt/c/Users/brunjick/Code/cycle-ts/node_modules/cycle-scripts-ts-webpack/scripts/init.js:63
      throw new Error('Unsupported stream library: ' + streamLib)
      ^

Error: Unsupported stream library: false
    at replacements (/mnt/c/Users/brunjick/Code/cycle-ts/node_modules/cycle-scripts-ts-webpack/scripts/ini
t.js:63:13)
    at module.exports (/mnt/c/Users/brunjick/Code/cycle-ts/node_modules/cycle-scripts-ts-webpack/scripts/i
nit.js:166:14)
    at ChildProcess.<anonymous> (/usr/lib/node_modules/create-cycle-app/src/installScripts.js:48:5)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:192:7)
    at maybeClose (internal/child_process.js:890:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)

Versions of packages used:
0.3.2

Cursor navigation not working with MYSYS shell

Code to reproduce the issue:
when running
create-cycle-app my-awesome-cycle-app
in WIndows Msys bash shell that comes with GitHub Desktop App (atually Msys from MinGW that comes with Git for Windows) the arrow keys and color do not work

Expected behavior:
Arrow keys work and highlight colour

Actual behavior:
No colour and arrow keys do not function

Versions of packages used:

Latest

This is really very low priority as running a Cmd in the default Win10 terminal is fine. I'm just recording so you have a recrd. No doubt other combinations of temrinal / shell will also fail,

How about an example for a component or driver?

I've just been exploring how to create and publish a driver / component as a module. I want to use typescript but enable the usual commons/ES6 import options form JavaScript but expose typings for TS use and intellisense in tools like VS Code. I don't think they would ever need to be uses as global scripts so AMD no needed.

This appears to be a non trivial config and rummaging around the cycles code is making my head spin as I'm new to TS.

So this seems like a perfect candidate flavour! :) 

Anyone fancy it?

Add --initFlavor

Would be nice if the create-cycle-app CLI could have a command to init an empty flavor structure for the ones who want to start creating their own flavors. ie:

$ create-cycle-app --initFlavor path/of/the/newFlavor

@geovanisouza92 what you think?

Continuos integration

We could perhapsh hook in travis or similar, so that we run at least the test against each PR, what you are your toughts in this direction?

Webpack build fails with Typescript 2.1

Code to reproduce the issue:
$ create-cycle-app my-app with TypeScript + Webpack
$ npm i typescript --save-dev (installs typescript 2.1)
$ npm start

Expected behavior:
No errors ;-)

Actual behavior:
Error message with partial trace:

PS D:\Projects\my-app> npm start

> [email protected] start D:\Projects\my-app
> cycle-scripts start

  build [========            ] 40%TypeError: Cannot read property 'exclude' of undefined
    at applyDefaults (D:\Projects\my-app\node_modules\awesome-typescript-loader\src\instance.ts:266:72)

Versions of packages used:
create-cycle-app 1.0.0
typescript 2.1

I can confirm that this does not occur with typescript 2.0.10.

cycle-scripts v2

This to quickly resume what to add to the next iteration of cycle-scripts:

BASICS:

• webpack2
• preset-env
• uglify / minification
• HtmlWebpackPlugin
• JSX -> ProvidePlugin({snabb: 'snabbdom-jsx'})
• cycle-dev-utils modules
• inquirer -> for eject confirmation
• inquirer -> for init (choose js or ts, choose streamlib -> rxjs, xstream, most)
• adhoc templates for javascript
• adhoc templates for typescript
• adhoc webpack configs for javascript
• adhoc webpack configs for typescript
• cleaner build assets output (js/ css/ images/)
• eslint/prettier
• CSS Autoprefixing

Autogenerate CHANGELOG with lerna

https://github.com/lerna/lerna-changelog

fails to run at all with crazy const error

node version = 6.5.0
create-cycle-app version = 3.0.6 but npm page says lates is 3.0.5 ???

I did this

npm install -g create-cycle-app 
npm create-cycle-app my-app --flavor cycle-scripts-one-fits-all

I got

C:\projects\spikes>C:\Users\steve\AppData\Roaming\npm\node_modules\create-cycle-app\index.js:4
const path = require('path')
^^^^^
SyntaxError: Use of const in strict mode.
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)
    at node.js:814:3

Integration with Widdershin/Tricycle

It would be nice to easily import/export project from https://github.com/Widdershin/tricycle

Flavor READMEs

Expand the actual READMEs for the core flavor, with a structure that cen be borrowed by others when creating a flavor, ie: https://github.com/Widdershin/cycle-scripts-widdershin/blob/master/README.md

@geovanisouza92 @Widdershin
What are your thoughts on the structure of a flavor readme?

I think it should list:

• file structure
• language/bundler support
• scripts
• usage
• secret sauce? (what is particular about the flavor, if anything?)

anything you'll add/remove?

A few questions on project development

This is a great tool! Keeping config out of sight is great for beginners. But like all 'magic' I worry about it as I'm likely to have to understand/maintain it at some point. Mind you magic is a lot less of a problem with build tools than live code (I chose cyclejs over the excellent MobX as I felt that had a bit too much magic, I might review that - heh).

So a few questions came up as someone new to this and wanting to try it out on a new project, partly for my own interest and partly to support our great community.

1. Does the hidden config ever change? Do you update dependency versions for us? If so when? When we update this project only? That seems to be the case as I see no live updating.

2. Are there any advantages to keeping the training wheels on for production project with expected long lifetime? Or is it best to eject and treat as a starter boilerplate The current examples simply create a couple of config files which is not at all complex to manage and being able to shrink wrap dependencies etc is important for public code

3. How do we add new features such as linting or css loaders to our projects? (reminds me a template CSS file might be a good addition to the flavours). The obvious answer is we simply edit the scripts to alter the configs. But is there more we need to do?

If it makes sense to keep the wheels on for a production project then we'd need a list of the changes per release.

I hope this is helpful

including @cycle/isolate as a default dependency

As per suggest in #45

Should throw an error if --flavor is not found (instead of installing the core one)

Code to reproduce the issue:
See cyclejs-community/create-cycle-app-flavors#1 (comment)

Actual behaviour:
If an error is passed to the --flavor flag (ie not valid path to local, or not publised flavor,...) it silently install the core-flavor instead.

Expected behaviour:
Should throw and error

Versions of packages used:
create-cycle-app 3.0.5

streamLib

I noticed that now that we don't have the streamLib choosing step anymore for non-core flavors, we cannot use the core flavors with the --flavor flag.

@geovanisouza92 , although maybe this is a non-issue it made me think that perhaps flavors should be the ones specifying if a streamLib choosing step is needed (if streamLibs supported > 1). What will you suggest?

Templating files

Use a template engine to write file, as per suggestion in #45

Add CSS to core flavours

Any real app will use CSS (or something that compiles to it) for styling, not just code managed classes used for DOM event hooks or component isolation. However the built in flavors have no CSS at all.

A minimum would be to simply provide a static styles.css refed from index.html

A more useful example might be to use webpack loaders - but there are many options even with the basics.

Using ES6 on tests

Code to reproduce the issue:
Use import (or any other ES6 syntax) on app.test.js

Expected behavior:
It runs the tests

Actual behavior:
It fails due mocha is not configured to support ES6.

Versions of packages used:
N/A

Reported on #13

Discovery flavors on npm registry

• Implement further the flavor discovery logic by relying on npm as a registry.
• Use the keyword create-cycle-app-flavor to discover community flavors.
• Keep coreFlavors.json for the core flavors.

Refer on awesome-cyclejs

Include some information at https://github.com/cyclejs-community/awesome-cyclejs about CCA tool.

Greenkeeper

Integrate greenkeeper for helping with keeping dependencies up to date

Investigate possible use of yarn instead npm, when present

Is the formatCodeOptions section in tsconfig.json valid?

The tsconfig.json contains a formatCodeOptions
https://github.com/cyclejs-community/create-cycle-app/blob/master/cycle-scripts-ts-webpack/template/tsconfig.json#L13-L16

But that is not in the offical TS docs or schema?
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
http://json.schemastore.org/tsconfig

It seems therefore to be invalid.

FYI I noticed this as Visual Studio Code didn't provide any intellisense for the secction.

Improve readme

Improve readme documentation making sure it reflect latest 1.0

ES6 + Webkit flavour doesn;t have "eject"

rather it has remove-training-wheels

An in-range update of validate-commit-msg is breaking the build 🚨

Version 2.11.0 of validate-commit-msg just got published.

Branch	Build failing 🚨
Dependency	validate-commit-msg
Current Version	2.10.1
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As validate-commit-msg is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

---

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Release Notes

v2.11.0

2.11.0 (2017-01-26)

Features

• lib: Add support for limiting allowed scopes (e05c6271)

Commits

The new version differs by 6 commits .

• 815bc77 Merge pull request #65 from Garbee/garbee/filter-scopes
• 3149921 fix(scopes,test): Added test for allowing any scope value.
• 3d21903 refactor(scopes): Update scopes feature per PR feedback. config property now . Validation moved into its own function. Fat arrow removed
• fde2abb docs(contributors): Add myself to contributors
• e05c627 feat(lib): Add support for limiting allowed scopes
• 04facc4 docs(contributors): add @travi (#64)

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Broken Build with @cycle/dom 15.0.0-rc.1

Code to reproduce the issue:

1. Clean creation as of 21st Jan 2017
2. create-cycle-app my-cycle-app
ES6 (babel) + Webpack
XStream, tailored for Cycle.js
3. cd my-cycle-app
4. npm start

Expected behavior:

Build completed in [X]s

App is running at http://localhost:8000

webpack: bundle is now VALID.

Actual behavior:

ERROR in ./~/@cycle/dom/lib/MainDOMSource.js
Module not found: Error: Cannot resolve module '@cycle/run/lib/adapt' in /Users/jon/Documents/git/craftship/tech-task-cycle/node_modules/@cycle/dom/lib
 @ ./~/@cycle/dom/lib/MainDOMSource.js 2:14-45

ERROR in ./~/@cycle/dom/lib/HTMLSource.js
Module not found: Error: Cannot resolve module '@cycle/run/lib/adapt' in /Users/jon/Documents/git/craftship/tech-task-cycle/node_modules/@cycle/dom/lib
 @ ./~/@cycle/dom/lib/HTMLSource.js 3:14-45

ERROR in ./~/@cycle/dom/lib/mockDOMSource.js
Module not found: Error: Cannot resolve module '@cycle/run/lib/adapt' in /Users/jon/Documents/git/craftship/tech-task-cycle/node_modules/@cycle/dom/lib
 @ ./~/@cycle/dom/lib/mockDOMSource.js 3:14-45

ERROR in ./~/@cycle/dom/lib/DocumentDOMSource.js
Module not found: Error: Cannot resolve module '@cycle/run/lib/adapt' in /Users/jon/Documents/git/craftship/tech-task-cycle/node_modules/@cycle/dom/lib
 @ ./~/@cycle/dom/lib/DocumentDOMSource.js 3:14-45

ERROR in ./~/@cycle/dom/lib/BodyDOMSource.js
Module not found: Error: Cannot resolve module '@cycle/run/lib/adapt' in /Users/jon/Documents/git/craftship/tech-task-cycle/node_modules/@cycle/dom/lib
 @ ./~/@cycle/dom/lib/BodyDOMSource.js 3:14-45

Versions of packages used:

  "dependencies": {
    "@cycle/dom": "^15.0.0-rc.1",
    "@cycle/xstream-run": "^4.2.0",
    "xstream": "^9.3.0"
  },

Looks like changes are afoot (cyclejs/cyclejs@b8a7c36) as the import referred to is not on master yet, if anyone else hits this issue just now I used:

1. npm run take-off-training-wheels
2. Edit package.json to use "@cycle/dom": "14.3.0"
3. npm i
4. npm start

Think I literally have just caught this stuff as v15-rc.1 is in flux, although does ask the question whether the create-cycle-app should lock down major versions explicitly when you init the project and let only major and minors through to stop this happening going forward.

Additionally could setup nightly builds in CI of the project with relevant tests that ensure the app still integrates correctly.

Thoughts?

TypeScript flavours giving error on npm start

Code to reproduce the issue:

Ok so did some more testing:
On mac, with the same node and npm version it works fine. However when in windows (10) it gives the TypeScript error.

npm install -g create-cycle-app
create-cycle-app test-typescript

Select Typescript + Browserify and Xstream

cd test-typescript
npm start

Expected behavior:

Should start normally.

Actual behavior:

Getting Typescript error:

TypeScript error: node_modules/@cycle/dom/lib/isolateModule.d.ts(6,35): Error TS2304: Cannot find name 'Map'.

Versions of packages used:

• node v6.9.0
• npm 3.10.8

Renaming take-off-training-wheels scripts

Rename take-off-training-wheels into eject

Error using create-cycle-app on mac: TypeError: installPackage.indexOf is not a function

Code to reproduce the issue:
$ sudo npm i -g create-cycle-app
$ create-cycle-app my-awesome-app

Expected behavior:
App bootstrapped inside my-awesome-app directory

Actual behavior:
Error:

Creating a new Cycle.js app in /Users/develop/dev/cycle/my-awesome-app.

/usr/local/lib/node_modules/create-cycle-app/src/getPackageName.js:7
  } else if (~installPackage.indexOf('@')) {
                             ^

TypeError: installPackage.indexOf is not a function
    at getPackageName (/usr/local/lib/node_modules/create-cycle-app/src/getPackageName.js:7:30)
    at installScripts (/usr/local/lib/node_modules/create-cycle-app/src/installScripts.js:15:23)
    at preparePackageJson (/usr/local/lib/node_modules/create-cycle-app/src/createApp.js:13:5)
    at preparePackageJson (/usr/local/lib/node_modules/create-cycle-app/src/preparePackageJson.js:21:3)
    at createApp (/usr/local/lib/node_modules/create-cycle-app/src/createApp.js:12:3)
    at Object.<anonymous> (/usr/local/lib/node_modules/create-cycle-app/index.js:42:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)

Versions of packages used:
Macbook Pro
Node: v6.9.5
npm: 3.10.10
create-cycle-app: 3.0.6

Contributors files

As discussed on #48

Add contributors file with a script to autogenerate it (similar to how standard do)

test directory is in .gitignore

For the browserify templates, both of them have the test directory present in the .gitignore.

This seems incorrect to me, as users will write tests that won't be committed. This is also silent, so easy to not notice.

Was there a reason or shall we just fix it?

Contribution guidelines

Add contributions docs explaining how to contribute and how to create community flavors that are discoverable by create-cycle-app

Add TypeScript + Webpack flavor

• cycle-scripts-ts-webpack: TypeScript + Webpack

Porting xstream-boilerplate to create-cycle-app flavor

As per discussion on cyclejs-community/xstream-boilerplate#233

How about turning this into a neutrino preset?

https://neutrino.js.org/

New flavor

Hi! Just opening an issue to say that I've created a new flavor:

https://github.com/Widdershin/cycle-scripts-widdershin

It's based off of es-browserify, but has an eslint config for semicolons, a separate test directory, includes babel-plugin-transform-object-rest-spread and a few more things.

If you like, I would love to have it on the list in the README.

Thanks!

Refer on cycle.js.org

Include some information at cycle.js.org site about CCA tool.

Limit stream library support within a custom flavor

Custom flavors should be able to inform about the supported stream libs, opting out from the stream library selection in case only 1 is supported.

License details are empty

Hi!

Just checked out the LICENSE and I see that the [name] and [year] still need to be filled out.

https://github.com/cyclejs-community/create-cycle-app/blob/master/LICENSE#L3

This is probably worth doing 😄

Better dev output for webpack

For the core webpack based flavors:

• silence verbose output on build (as per webpack/webpack#1191 (comment))
• output server address once started (via a compiler plugin as per https://webpack.github.io/docs/plugins.html)

Rethinking CCA

@Widdershin @geovanisouza92 @TylorS

I think we should somehow rethink some parts of create cycle app. I'm referring to core flavors.
Imho we try to accomodate to many options, and I think that if the aim of create-cycle-app is allowing people to get up and start quickly with cycle then it shouldn't make the user think about which xlib to use, which bundle/language ecc.. but simply kickstart him. Everything else, like special cases, configuration, ecc could be done with seperated flavors, as that is what are for.

While it seemed a nice idea when we began, Its way harder to mantain as we move along, it is also harder to add features, tests ecc, as if you add something for one core flavor the same should be applied to all as someone expect core-flavors to offer the same functionalities.
I would suggest that we move toward a single core-flavor, no streamLib options.

• I would go with a es flavor (no ts, as this add complexity for people starting with cycle as a js fw imho), in this direction webpack-es6 could be a nice candidate to start.
• It should have CSS, proper tests and module-loading properly done, it should be good enough for people to use it in production.
• we should maintain and keep the core flavor supported as much as possible, create-react-app is a terrific example of how we should do it and try to push forward with it.

This are just some of my initial thoughts on the matter, would love to hear what you think in this direction...

Replace northbrook

There are some bugs with northbrook, like:

• Sometimes it doesn't detect changes made on a single package, because it just look for changes from the latest tag, instead of "latest tag for package X"
• If you type the wrong password on npm release, causing an error, it assumes that the release was made (it should be transactional)

Some options are:

• Lerna
• Raw scripts