A next-generation package manager for the front-end

Related tags

Package Managers duo
Overview

duo

npm version build status Join the chat at https://gitter.im/duojs/duo

Duo is a next-generation package manager that blends the best ideas from Component, Browserify and Go to make organizing and writing front-end code quick and painless.

Features

  1. has first-class support for Javascript, HTML and CSS
  2. exposes a unix-y command line interface
  3. pulls source directly from GitHub with semantic versioning
  4. supports source transforms, like Coffeescript or Sass
  5. does not require a manifest

Installation

Install Duo straight from npm with:

$ npm install -g duo

Getting Started

To get started just write normal Javascript, requiring dependencies straight from the file system or from GitHub as you need them:

var uid = require('matthewmueller/uid');
var fmt = require('yields/fmt');

var msg = fmt('Your unique ID is %s!', uid());
window.alert(msg);

Then use duo to install your dependencies and build your file:

$ duo index.js

Finally, drop a single <script> onto your page and you're done!

<script src="build/index.js"></script>

Same goes for CSS! You can require dependencies and assets from the file system or straight from GitHub:

@import 'necolas/normalize.css';

body {
  color: teal;
  background: url('./background-image.jpg');
}

Then bundle up your CSS with duo:

$ duo index.css

And add your bundled-up stylesheet to your page!

<link rel="stylesheet" href="build/index.css">

Authenticate with Github

We recommend that you authenticate with Github so you can increase your rate limit and allow you to pull from private repositories. To do that, add the following entry to your ~/.netrc file:

machine api.github.com
  login <username>
  password <token>

You can create a new token here: https://github.com/settings/tokens/new

Debugging

If you run into an issue with Duo, often times you can resolve it by prepending DEBUG=duo* to your $COMMAND:

$ DEBUG=duo* $COMMAND

Example:

$ DEBUG=duo* duo index.js

If you can't figure it out, you should open an issue: https://github.com/duojs/duo/issues

Test

Download this repository and run:

make test

Authors

License

The MIT License

Copyright © 2014

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • How will duo handle non-CSS images/assets?

    How will duo handle non-CSS images/assets?

    Suppose I'm using an <img> tag in a .html template, duo would never be made aware of such an asset. (and thus it would never be moved to build/) In component, this is where manifests came in handy, so I'm wondering how duo will work with such a case?

    Will it just be up to the developer to have a script that copies known images to build/ after duo has run? Is there any way duo could be notified of these assets? (when does duo look at manifest files?)

    discussion 
    opened by dominicbarnes 44
  • duo-css: should parse each of the css files in

    duo-css: should parse each of the css files in "styles": [...]

    I think this will allow us to continue to support components with JS and CSS. It's a little weird though, because there should probably only be one style that imports everything else.

    @yields @ianstormtaylor @visionmedia could use some thoughts here.

    opened by matthewmueller 35
  • default to index.css instead of styles[0]

    default to index.css instead of styles[0]

    @MatthewMueller this is all it would take. 5 tests don't pass with this though so it will probably expand some. but, this solves the problem of being able to support both legacy component and the new @import style, so you can port stuff from component to duo without breaking anything in the process.

    opened by lancejpollard 29
  • nested components don't respect version from main component.json

    nested components don't respect version from main component.json

    At a high level, basically what happens is, if you specify a specific version in your component.json for some component, and some dependencies also reference that component, but they all have * instead of a specific version, then all the nested components will use the latest version of that component, while anything in your current project will use the specific version.

    What should happen is, if all dependencies reference some component using * version, and then in your current project you specify 0.3.1, then everything should use 0.3.1, even though the latest may be 0.7.0 or something.

    In more depth, here's the setup.

    current project:

    {
      "name": "my-app",
      "dependencies": {
        "some/component": "0.3.1",
        "dependency/a": "*",
        "dependency/b": "1.2.3"
      }
    }
    

    the component you want to pin to a specific version:

    {
      "repo": "some/component",
      "version": "0.7.0"
    }
    

    some random dependency that depends on some/component, but isn't tied to a specific version:

    {
      "repo": "dependency/a",
      "version": "2.4.1",
      "dependencies": {
        "some/component": "*"
      }
    }
    

    some other random dependency that depends on some/component, but isn't tied to a specific version either:

    {
      "repo": "dependency/b",
      "version": "1.2.3",
      "dependencies": {
        "some/component": "*"
      }
    }
    

    The problem now is this. Say inside dependency/a or dependency/b, you do this:

    // say this is dependency-a/index.js
    require('some/component');
    

    Now say in your current project you do this:

    require('dependency/a');
    

    When you require dependency/a in your current project, which then requires some/component, it will require some/[email protected]. This isn't the desired behavior I don't think (this isn't how it works in node).

    Instead, it should require some/component/@0.3.1, the one that is defined in the current project's component.json.

    Otherwise, you have no control over what the nested components might download. The * that they have their versions pinned at means that you can pin your current project to a specific version and they will use that (in my mind at least, and this is how node/component did it).

    Seems like a bug to me, what do you think? Any ideas how to fix it?

    opened by lancejpollard 27
  • EEXIST error on build

    EEXIST error on build

    I am getting this issue when trying to build a project being migrated from component.js:

    ⧑ duo --no-cache --use duo-env lib/index.{js,css}
    
            using : duo-env
         building : lib/index.js
         building : lib/index.css
        installed : [email protected]
        ...
        installed : component-type@c817c
            error : Error: EEXIST, symlink '/Users/jasonkuhrt/projects/cloud-app-cloud-control/components/[email protected]/lib/number-readout/assets/digital-7_mono_italic-webfont.eot'
    

    It seems I am the first to have an EEXIST issue on duo; any ideas anyone?

    opened by jasonkuhrt 25
  • External Source Maps!

    External Source Maps!

    This adds support for external source-maps!

    The --development flag no longer implies source-maps, instead the --source-maps (or --inline-source-maps) flags must be used.

    Duo#sourceMap(value) has been added to the API.

    • when value === true, an external source-map will be created. (ex: build/index.js
      • build/index.js.map)
    • when value === 'inline', the output file will have the sourcemap added as an inline comment.
    • when value === false, no source-maps will be generated at all.

    In the CLI, when printing to stdout, only inline source-maps are supported. Thus, if you only specify true, it will automatically change to inline.

    BREAKING: this changes the api for Duo#run(), it now returns the same object that duo-pack@2 returns. (ie: { code, map })

    opened by dominicbarnes 22
  • file transforms

    file transforms

    i've been thinking a lot about file transforms lately and I think I've come up with a decent solution. Here's what the API would look like:

    duo
      .use(jade())
      .use(styl())
    

    Where styl and jade are one of the following:

    • a synchronous function that returns a string function(...) { return compiled }
    • an asynchronous function: function(..., fn) { return fn(null, compiled) }
    • a gulp stream

    The reason I'm pushing for gulp streams is that it will allow us to tap into a huge repository of plugins for things like: transpiling ES6 => ES5 (adding import, etc), coffeescript support, and many other things I haven't thought of.

    However, the problem I'm running into is the following. Maybe this is obvious to someone that's worked a lot with streams, but basically if you do the following, you will not get the intended results:

    var fs = require('fs');
    var map = require('map-stream');
    
    function prepend(str, fn) {
      return fn(null, 'hi ' + str);
    };
    
    var t = map(prepend);
    
    var a = fs.createReadStream('./a.txt', 'utf8');
    var b = fs.createReadStream('./b.txt', 'utf8');
    var c = fs.createReadStream('./c.txt', 'utf8');
    
    a.pipe(t).pipe(process.stdout);
    b.pipe(t).pipe(process.stdout);
    c.pipe(t).pipe(process.stdout);
    

    Basically, the transform stream pulls from all 3 sources at the same time. This is a problem because gulp streams are already initialized by the time they're passed through (ie. styl()).

    What needs to happen is the files need to be queued and wait until the transform pipeline is free. I'm not sure if this is going to be a bottleneck yet, or if there is a better way, but that's what I'm facing right now.

    I guess to get duo out there maybe we can just support the first 2 options (sync and async fn), but I think the gulp streams will be a huge plus for people.


    How we'll walk the files is the following:

    $ duo main.css
    

    main.css:

    @import "./one.styl"
    @import "./two.less"
    @import "./three"
    

    To resolve three we will base it off the root entry (extname("main.css") => ".css" => "./three.css"). We will do the same for JS and eventually HTML.

    /cc @yields @juliangruber @ianstormtaylor

    opened by matthewmueller 21
  • Support

    Support "local" directive in component.json.

    Duo currently ignores the "local" and "paths" entries in component.json when resolving dependencies. This change resolves that by adding an isLocal test when resolving. It appends the dependency to all of the paths listed in the "paths" entry (and also tries root), returning the first one for which fs.exists reports true.

    The isLocal test only gets used when component.json includes a "locals" entry. Otherwise, dependency resolution remains unchanged.

    opened by beverlycodes 19
  • duo: Use win-fork rather than child_process.spawn

    duo: Use win-fork rather than child_process.spawn

    Really only speculating still, but this should fix #221.

    See:

    • https://github.com/duojs/duo/pull/118#discussion_r15720060
    • https://github.com/duojs/duo/issues/221
    opened by stephenmathieson 18
  • Build error on windows 7

    Build error on windows 7

    I've installed duo (globally) without problems, created a token and a .netrc file (which is actually a _netrc file with windows: http://stackoverflow.com/q/6031214).

    But after trying the "getting started" example from the readme, I get the following error (when running duo index.js > build.js):

    events.js:72
            throw er; // Unhandled 'error' event
                  ^
    Error: spawn ENOENT
        at errnoException (child_process.js:988:11)
        at Process.ChildProcess._handle.onexit (child_process.js:779:34)
    

    An empty build.js file is created and duo exits after the error. Any idea what's going wrong here?


    Btw, these are the contents of the index.js I'm trying to build:

    var uid = require('matthewmueller/uid');
    var fmt = require('yields/fmt');
    
    var msg = fmt('Your unique ID is %s!', uid());
    window.alert(msg);
    
    opened by ismay 16
  • `TypeError: undefined is not a function` on `process.off`

    `TypeError: undefined is not a function` on `process.off`

    Hmm, not totally sure what this could be just running into it. I haven't changed anything since yesterday but now when I do a fresh checkout of https://github.com/segmentio/analytics.js-integrations, and build, it's giving me this:

    $ duo --development test/index.js build/build.js
    /usr/local/lib/node_modules/duo/node_modules/duo-package/index.js:382
          process.off('SIGINT', abort);
                  ^
    TypeError: undefined is not a function
        at enstore.<anonymous> (/usr/local/lib/node_modules/duo/node_modules/duo-package/index.js:382:15)
        at enstore.EventEmitter.emit (events.js:104:17)
        at Stream.end (/usr/local/lib/node_modules/duo/node_modules/duo-package/node_modules/enstore/index.js:35:10)
        at _end (/usr/local/lib/node_modules/duo/node_modules/duo-package/node_modules/enstore/node_modules/through/index.js:61:9)
        at Stream.stream.end (/usr/local/lib/node_modules/duo/node_modules/duo-package/node_modules/enstore/node_modules/through/index.js:70:5)
        at Gunzip.onend (_stream_readable.js:501:10)
        at Gunzip.g (events.js:199:16)
        at Gunzip.EventEmitter.emit (events.js:129:20)
        at _stream_readable.js:898:16
        at process._tickCallback (node.js:343:11)
    

    So far I've tried:

    $ rm -rf $TMPDIR/duo
    

    but same thing. any ideas? Was anything pushed last night that could break? Maybe a sub-package with loose dependencies?

    opened by lancejpollard 16
  • cant npm install duo@latest

    cant npm install duo@latest

    this is a blocker atm

    ∴ npm install --save-dev duo@latest
    npm WARN deprecated [email protected]: 'native-or-bluebird' is deprecated. Please use 'any-promise' instead.
    npm WARN deprecated [email protected]: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.
    -
    > [email protected] install /Users/stephenmathieson/dev/src/github.com/segmentio/meta-ui/node_modules/duo/node_modules/duo-cache/node_modules/level/node_modules/leveldown
    > prebuild --install
    
    npm ERR! Darwin 15.0.0
    npm ERR! argv "/Users/stephenmathieson/.nvm/versions/node/v4.2.4/bin/node" "/Users/stephenmathieson/.nvm/versions/node/v4.2.4/bin/npm" "install" "--save-dev" "duo@latest"
    npm ERR! node v4.2.4
    npm ERR! npm  v2.14.12
    
    npm ERR! version not found: [email protected]
    npm ERR! 
    npm ERR! If you need help, you may report this error at:
    npm ERR!     <https://github.com/npm/npm/issues>
    
    npm ERR! Please include the following file with any support request:
    npm ERR!     /Users/stephenmathieson/dev/src/github.com/segmentio/meta-ui/npm-debug.log
    
    
    opened by stephenmathieson 0
  • not helpful

    not helpful "EISDIR: illegal operation on a directory, read" errors

    after renaming some stuff (and missing an @import), duo throws a super not-helpful error:

    error : Error: EISDIR: illegal operation on a directory, read
        at Error (native)
    

    something like this would be awesome instead

    opened by stephenmathieson 0
  • Allow required packages to specify their own transform rules

    Allow required packages to specify their own transform rules

    Browserify has a hackish way to do this, with a section inside package.json.

    What would be ideal would be a pre-processor independent way of saying what is being required inside a module. E.g.,

    # HappyReactComponent/package.json
    {
       "codebase": "es6 jsx png myth"
    }
    

    Or maybe it should use mime types or something.

    opened by jxe 0
  • Watch problem

    Watch problem

    Hi, using this CLI cmd and 0.15.3

    duo --watch client/main.js --use duo-babel
    

    It builds fine, but then doesn't watch anything.

    This is basically the folder structure I have after running the command from the root dir:

    +root
    |+client/main.js
    |+build/client/main.js
    |+components/
    ...
    

    I must be missing s.th. Cheers!

    opened by gnimmelf 1
  • Install error

    Install error

    I'm using Mac OS X El Capitan Beta with NPM version 2.14.1, and I got errors below:

    $ sudo npm install -g duo
    
    > [email protected] install /usr/local/lib/node_modules/duo/node_modules/duo-cache/node_modules/level/node_modules/leveldown
    > prebuild --download
    
    prebuild WARN install ENOENT, open '/Users/DYZ/.npm/_prebuilds/https-github.com-level-leveldown-releases-download-v1.4.1-leveldown-v1.4.1-node-v14-darwin-x64.tar.gz.8746-02270bb.tmp'
    prebuild ERR! build EACCES, mkdir '/Users/DYZ/.node-gyp/0.12.4'
    npm ERR! Darwin 15.0.0
    npm ERR! argv "node" "/usr/local/bin/npm" "install" "-g" "duo"
    npm ERR! node v0.12.4
    npm ERR! npm  v2.10.1
    npm ERR! code ELIFECYCLE
    
    npm ERR! [email protected] install: `prebuild --download`
    npm ERR! Exit status 2
    npm ERR! 
    npm ERR! Failed at the [email protected] install script 'prebuild --download'.
    npm ERR! This is most likely a problem with the leveldown package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR!     prebuild --download
    npm ERR! You can get their info via:
    npm ERR!     npm owner ls leveldown
    npm ERR! There is likely additional logging output above.
    
    npm ERR! Please include the following file with any support request:
    npm ERR!     /Users/DYZ/npm-debug.log
    
    opened by dyzdyz010 1
Owner
Duo
A next-generation package manager for the front-end.
Duo
📦🚀 Fast, disk space efficient package manager

中文 | Español Fast, disk space efficient package manager: Fast. Up to 2x faster than the alternatives (see benchmark). Efficient. Files inside node_mod

pnpm 21.2k Jan 3, 2023
frontend package manager and build tool for modular web applications

THIS PROJECT IS DEPRECATED Component is not maintained anymore. See here #639 for more information. You can still use the component registry on compon

Component 4.6k Dec 30, 2022
JavaScript package manager - using a browser-focused and RequireJS compatible repository

****NOTE: this project is no longer active and not recommended for use. It is left here for reference. **** Jam was created at a time before Bower and

Caolan McMahon 1.5k Dec 10, 2022
Brand new static package manager.

spm Brand new static package manager for browser. spm 从 3.9 开始将不再管理组件的生命周期, 即不再有 spmjs.io. 所以相应的逻辑全部去除. 请使用 npm 来管理组件. Install $ npm install spm -g Us

Static Package Manager 907 Sep 24, 2022
interplanetary package manager

interplanetary package manager

Nathan Ginnever 10 Oct 9, 2021
Create front end projects from templates, add dependencies, and automate the resulting projects

volo Create browser-based, front-end projects from project templates, and add dependencies by fetching them from GitHub. Once your project is set up,

volojs 1.4k Jan 2, 2023
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Minimal, zero-configuration and fast solution for static site generation in any front-end framework.

Staticit - Introduction Whether you want to increase performance of your web application or improve SEO. Generally you have 2 options, use SSR (Server

Engineerhub 4 Jun 11, 2022
Front End do Projeto Integrador do bootcamp da Generation Brasil.

Integrantes do grupo ?? : Alan Carlos Fabrício Rocha Guilherme Albuquerque Josiane Caroliny Lucas Melo Wesley Ninaja Genducation ?? Projeto desenvolvi

Guilherme Cruz 1 Feb 2, 2022
A devtool improve your pakage manager use experience no more care about what package manager is this repo use; one line, try all.

pi A devtool improve your pakage manager use experience no more care about what package manager is this repo use; one line, try all. Stargazers over t

tick 11 Nov 1, 2022
This project was developed to practice Front-end and Back-end comunication, data formatting, http requests GET, POST, DELETE, form validation, it also consumes a rest API

React Application ?? Demonstration of the application | Features | Technologies used | Application installation ?? Demonstration of the application Ap

Victor Lira 36 May 17, 2022
Personal Blog - a project developed with Angular for the front-end interface and Wordpress for the back-end API served with Docker containers

PersonalBlog This project was generated with Angular CLI version 13.0.1. Front-end Interface Development server Run ng serve or ng serve --configurati

null 9 Oct 5, 2022
Pass trust from a front-end Algorand WalletConnect session, to a back-end web service

AlgoAuth Authenticate to a website using only your Algorand wallet Pass trust from a front-end Algorand WalletConnect session, to a back-end web servi

Nullable Labs 16 Dec 15, 2022
It consists of a recreation of Twitter, to put into practice both Front-end and Back-end knowledge by implementing the MERN Stack together with other technologies to add more value to the project.

Twitter-Clone_Back-end ✨ Demo. ?? About the project. ?? Descriptions. It consists of a recreation of Twitter, to put into practice knowledge of both F

Mario Quirós Luna 5 Apr 12, 2022
This is a template project demonstrating how the MERN stack(Mongo, Express, React, Node) can be used, here we have the back end implementation and there is the React implementation as the front end

Versão em português MERN stack This is a template project demonstrating how the MERN stack(Mongo, Express, React, Node) can be used, here we have the

Douglas Samuel Gonçalves 2 Jan 22, 2022
A super generic Lua web engine. Uses Lua for front-end, JavaScript for back-end, implemented in HTML.

A super generic Lua web engine. Uses Lua for front-end, JavaScript for back-end, implemented in HTML. This project is still in HEAVY development and w

Hunter 2 Jan 31, 2022
It consists of a recreation of Twitter, to put into practice knowledge of both Front-end and Back-end implementing the MERN Stack along with other technologies to add more value to the project.

Twitter-Clone_Front-end ✨ Demo. Login Home Profile Message Notifications Deployed in: https://twitter-clone-front-end.vercel.app/ ?? About the project

Mario Quirós Luna 5 Jun 26, 2022