ngokevin / angle Goto Github PK

:clock430: A-Frame command-line tool for installing components and scaffolding templates.

Home Page: https://www.npmjs.com/package/angle

License: MIT License

JavaScript 70.82% HTML 29.18%

angle's Introduction

angle

angle is a general purpose command-line tool for A-Frame. angle can install components from the Registry into an HTML file, initialize component templates for publishing, and bootstrap scene boilerplate.

Installation

npm install -g angle
angle <command>

Commands

Run angle --help to get a list of all commands and options.

`angle initlocalcomponent <componentName>`

Quickly create a component JavaScript file from a simple template locally in the working directory. Meant to be used to create a component for an application. Not meant for publishing or sharing.

angle initlocalcomponent enemy-ship

`angle initcomponent`

Create a template in the working directory for an A-Frame component for publishing to the ecosystem. This command will ask several questions about your component to get things set up. See how to write a component.

angle initcomponent

To develop the component:

npm install
npm start

To publish the component to the ecosystem:

npm publish
npm run ghpages

Then submit to the A-Frame Registry.

`angle initscene`

Bootstrap an A-Frame scene in the working directory. This command will currently ask for the name of the scene and whether or not you want tracked controllers.

angle initscene

? What is your scene's title? (e.g., Forest Scene)
? Do you want tracked controls with hand models? (y/N)

angle's People

Contributors

Stargazers

Watchers

Forkers

jesstelford lalencha jhsu cvan 7dir johnrees robertlong fernandojsg levidehaan zerojuls enterstudio anselanza arcturus drewwebster madmadi jgbarah feiss chewuaka bonomali kfarr brianpeiris

angle's Issues

Use Nunjucks to bootstrap the component templates rather than using sed.

{{ npmName }} did not set
https://github.com/aframevr/angle/blob/311aac3ea98ecd4a536a3e00af6ba65e3ecdd939/lib/initcomponent.js#L74

new Version with my additional and fixs

https://github.com/7dir/angle
7dir branch

results https://github.com/7dir/aframe-newver-component

examples rename to docs (github settings github-pages master/docs)
npm publish
now we have and full source and dist and example in docs for gh-page

very few changes

Exclude dist from version control

Hiya! I wanted to recommend excluding the dist directory from version control by adding it to .gitignore. I know we want it in the npmjs distributed version, but we can accomplish that by (1) building on prepublish (which the template already does), and (2) whitelisting the built files in package.json's files array, as I've done here. This would make sure it's available on unpkg too.

(Including compiled code in version control makes diffs much harder to read and increases the potential of merge conflicts when collaborating). Unless there's some other reason it's included?

gh-pages vs /docs for examples

In my own components, I typically use a /docs folder for live demos (e.g. terrain-component). This eliminates the need for a separate gh-pages branch and IMO makes publishing examples simpler.

If there is interest, I could do a PR (mostly just need to rename "examples" to "docs").

Cannot find module 'aframe-registry'

Fresh install in this environment:
npm 6.1.0
node 10.4.0
macOS 10.13.5

Trying to run

$ angle initscene

Returns the following:

internal/modules/cjs/loader.js:596
    throw err;
    ^

Error: Cannot find module 'aframe-registry'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
    at Function.Module._load (internal/modules/cjs/loader.js:520:25)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/angle/lib/install.js:3:16)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)

prepare for aframe-registry

https://github.com/aframevr/aframe-registry

Component Requirements

Must be published to npm.
Must be published to GitHub.
Must self-register themselves with AFRAME.registerComponent.
Must contain documentation on component properties and sample usage in the README.
Must contain at least one example published to GitHub Pages.
A link to the examples must be added as the GitHub repository's Website next
to the GitHub repository's Description.
Must make sense in the context of a WebVR application. This can change
later, but the initial components of the Registry will be under strict
curation.

Component Suggestions

Should include an attractive preview image or GIF in your README for display.
Should follow semver in your component versioning scheme, mirroring A-Frame's latest stable version.
Use angle, an A-Frame command-line tool, to bootstrap a component template for publishing.
Add A-Frame Registry maintainer Kevin Ngo as
a collaborator to your GitHub repository and as an owner to your npm package
(npm owner add ngokevin) if you want help maintaining your component.

Install layout component failed.

I follow the tutorial https://aframe.io/docs/0.7.0/guides/building-a-360-image-gallery.html# to install the layout and other components, but when I use angle to install the related components, it gives me below errors:

Installing A-Frame component layout to index.html
Detected A-Frame version 0.7.0
/Users/pchen143/.nvm/versions/node/v8.9.1/lib/node_modules/angle/lib/install.js:57
if (moduleName in registry[version].components) {
^

TypeError: Cannot read property 'components' of undefined
at Command.install (/Users/pchen143/.nvm/versions/node/v8.9.1/lib/node_modules/angle/lib/install.js:57:39)
at Command.listener (/Users/pchen143/.nvm/versions/node/v8.9.1/lib/node_modules/angle/node_modules/commander/index.js:315:8)
at emitTwo (events.js:126:13)
at Command.emit (events.js:214:7)
at Command.parseArgs (/Users/pchen143/.nvm/versions/node/v8.9.1/lib/node_modules/angle/node_modules/commander/index.js:653:12)
at Command.parse (/Users/pchen143/.nvm/versions/node/v8.9.1/lib/node_modules/angle/node_modules/commander/index.js:475:21)
at Object. (/Users/pchen143/.nvm/versions/node/v8.9.1/lib/node_modules/angle/index.js:27:4)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)

I use the command 'npm uninstall -g angle' and 'angle install layout'. My node version is 8.9.1.

{{ aframeVersion }} is pulling 0.6.0 instead of most recent build

Hey! Working on a new component and noticed that while using the angle initcomponent command the version that it is being used in the READEME.md, examples/basic/index.html etc is 0.6.0 instead of the most recent version. At the time of me logging this the most recent version is 0.7.1.

Cheers,

U can`t use angel with angle

Hello!

angle install <componentname> [htmlfilename]

Install a component from the registry to an HTML file. This will detect the A-Frame version from your HTML file and install the appropriate version of the component as a <script> tag.

So I can not use angel with angle )))

cannot install globally on linux

Looks like it tries to perform some operations not through the current user context (root in that case)

$ sudo npm i -g angle
/usr/local/bin/angle -> /usr/local/lib/node_modules/angle/index.js

> [email protected] postinstall /usr/local/lib/node_modules/angle/node_modules/spawn-sync
> node postinstall


> [email protected] postinstall /usr/local/lib/node_modules/angle/node_modules/aframe-registry
> npm run config


> [email protected] config /usr/local/lib/node_modules/angle/node_modules/aframe-registry
> shx cp -n scripts/templates/config.local.js scripts

cp: copyFileSync: could not write to dest file (code=EACCES):scripts/config.local.js
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] config: `shx cp -n scripts/templates/config.local.js scripts`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] config script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

┌───────────────────────────────────────────────────────────┐
│                  npm update check failed                  │
│            Try running with sudo or get access            │
│           to the local update config store via            │
│ sudo chown -R $USER:$(id -gn $USER) /home/naugtur/.config │
└───────────────────────────────────────────────────────────┘

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/naugtur/.npm/_logs/2017-09-29T09_39_32_482Z-debug.log
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/angle/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `npm run config`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/naugtur/.npm/_logs/2017-09-29T09_39_36_394Z-debug.log

ghpages OR/AND exaples AND component aframe-registry

It`s only my point of view

what I`m talking about?

    "preghpages": "npm run build && shx rm -rf gh-pages && shx mkdir gh-pages && shx cp -r examples/* gh-pages",
    "ghpages": "npm run preghpages && ghpages -p gh-pages",

it`s bad practice: no sources
it is good for commercial usage, just show example

ghpages aka source code

I thought we should upload full component repository with source (like polymer web-components)
add license (done)
add readme (done)
git init && git add -A && git commit -m 'git aframe-COMPONENT_NAME-component' (it`s not neccasary)
git remote add origin https://github.com/USERNAME/aframe-COMPONENT_NAME-component.git (it`s not neccasary too)

Usage
  $ ghpages

Options
  -p, --path    Path (directory to push; defaults to current directory)
  -r, --repo    Repository (GitHub username, GitHub username/repo, full repo URL)
  -d, --domain  Domain name (for `CNAME` to create in GitHub Pages branch)
  -p, --path    Path or directory to publish. Defaults to root directory of project.
  -h, --help    Show help

Examples
  $ ghpages
  $ ghpages cvan
  $ ghpages cvan/blog
  $ ghpages cvan/blog -p dist
  $ ghpages [email protected]:cvan/blog.git
  $ ghpages -r cvan/blog -d blog.cvan.io

Deploy

I surpose just add now

   "deploy": "ghpages -r {{ repo }}",

A-Frame Registry

It would be great to add only good component
Web-components Registry have bad practice allow everyone to publish component, then it look like
scrap-heap :-)

I don`t know how A-Frame team add component to Registry
Manualy?

search features

angle search <component>

NPM install yields no global angle command via command line

Hello,

Very interesting software, and I'm eager to test it it out. I attempt an install using npm usingnpm install -g angle and the software did install, but I can't find a bin directory containing any executables and the angle command cannot be found.

Is there some other file I should be referencing in my bash profile to reference the the angle command? I'm working on a Macbook pro if that makes any difference.

Travis

angle install

$ angle install aframe-alongpath-component index.html
Installing A-Frame component `aframe-alongpath-component` to `index.html`
Detected A-Frame version 0.5.0
C:\src\angle\lib\install.js:50
  if (moduleName in registry[version].components) {
                                     ^

TypeError: Cannot read property 'components' of undefined
    at Command.install (C:\src\angle\lib\install.js:50:38)
    at Command.listener (C:\src\angle\node_modules\commander\index.js:301:8)
    at emitTwo (events.js:106:13)
    at Command.emit (events.js:191:7)
    at Command.parseArgs (C:\src\angle\node_modules\commander\index.js:615:12)
    at Command.parse (C:\src\angle\node_modules\commander\index.js:458:21)
    at Object.<anonymous> (C:\src\angle\index.js:23:9)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)

init registerSystem - new features

Severe Security Issues in Component Dependencies

I just pushed a component made with angle to Github and got the following security issues, all from dev-dependencies in the generated component.

Many of the dependencies are deprecated.

npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: to-iso-string has been deprecated, use @segment/to-iso-string instead.
npm WARN deprecated [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated [email protected]: This package is unmaintained. Use @sinonjs/formatio instead
npm WARN deprecated [email protected]: wrench.js is deprecated! You should check out fs-extra (https://github.com/jprichardson/node-fs-extra) for any operations you were using wrench for. Thanks for all the usage over the years.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.

publish ghpages

.gitignore

and there are no .gitignore after angle initcomponent, only .npmignore
https://docs.npmjs.com/misc/developers
I can not understand why
What`s happened with .gitignore

publish

cp -r examples/* gh-pages - it`s bad!
Where is aframe-my-component.js
So...

angle\templates\component\package.json
add devDependencies

  "gh": "^1.12.8",

remove it

"prepublish": "npm run dist",
"preghpages": "npm run build && shx rm -rf gh-pages && shx mkdir gh-pages && shx cp -r examples/* gh-pages",
"ghpages": "npm run preghpages && ghpages -p gh-pages",
"start": "npm run dev"

leave this

"build": "browserify examples/main.js -o examples/build.js",
"dev": "budo examples/main.js:build.js --dir examples --port 8000 --live --open",
"dist": "webpack index.js dist/{{ npmName }}.js && webpack -p index.js dist/{{ npmName }}.min.js",
"lint": "semistandard -v | snazzy",
"mkrepo": "node ./node_modules/gh/bin/gh.js re --new {{ npmName }} --gitignore Node",
"publish": "npm run dist && npm run mkrepo && ghpages",
"start": "npm run dev"

The End

then we can npm run publish

Add unit test template

Installing components fails

I tried the instructions in the readme (MacOS 10.11.6)

aframe$ angle initscene
Initializing A-Frame scene
? What is your scene's title? (e.g., Forest Scene) Ixxy Test
? Do you want tracked controls with hand models? No
aframe$ cd ixxy-test/
aframe/ixxy-test$ angle install aframe-mountain-component
Installing A-Frame component `aframe-mountain-component` to `index.html`
Detected A-Frame version 0.3.2
/usr/local/lib/node_modules/angle/lib/install.js:49
  if (moduleName in registry[version].components) {
                                     ^

TypeError: Cannot read property 'components' of undefined
    at Command.install (/usr/local/lib/node_modules/angle/lib/install.js:49:38)
    at Command.listener (/usr/local/lib/node_modules/angle/node_modules/commander/index.js:301:8)
    at emitTwo (events.js:106:13)
    at Command.emit (events.js:191:7)
    at Command.parseArgs (/usr/local/lib/node_modules/angle/node_modules/commander/index.js:615:12)
    at Command.parse (/usr/local/lib/node_modules/angle/node_modules/commander/index.js:458:21)
    at Object.<anonymous> (/usr/local/lib/node_modules/angle/index.js:23:9)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)

Outdated dependencies

cd aframe-osc-component && npm install && npm run start

yields

npm WARN deprecated [email protected]: This package has moved to @tweenjs/tween.js. Please update your dependencies.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated [email protected]: wrench.js is deprecated! You should check out fs-extra (https://github.com/jprichardson/node-fs-extra) for any operations you were using wrench for. Thanks for all the usage over the years.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: to-iso-string has been deprecated, use @segment/to-iso-string instead.
npm WARN deprecated [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN prefer global [email protected] should be installed with -g

dependencies fromangle/templates/component/package.json

angle forkcomponent

Can't run test: "need to include some adapter that implements karma.start method!"

Upon initializing a new component with angle I can't seem to get the test to actually run. Chrome launches ok with Karma connected successfully but this error is shown on the terminal:

START:
Chrome 84.0.4147 (Mac OS X 10.15.6) ERROR
You need to include some adapter that implements karma.start method!