activewidgets / getlibs Goto Github PK

OBSOLETE, DO NOT USE: This project is no longer maintained

License: MIT License

JavaScript 100.00%

systemjs unpkg cdnjs babel typescript angular react vue

getlibs's Introduction

https://unpkg.com/getlibs

An in-browser module loader configured to get external dependencies directly from CDN. Includes babel/typescript. For quick prototyping, code sharing, teaching/learning - a super simple web dev environment without node/webpack/etc.

All front-end libraries

Angular, React, Vue, Bootstrap, Handlebars, jQuery are included. Plus all packages from cdnjs.com and all of NPM (via unpkg.com). Most front-end libraries should work out of the box - just use import/require(). If a popular library does not load, tell us and we'll try to solve it with some library-specific config.

Write modern javascript (or typescript)

Use latest language features or JSX and the code will be transpiled in-browser via babel or typescript (if required). To make it fast the transpiler will start in a worker thread and only process the modified code. Unless you change many files at once or open the project for the first time, the transpiling should be barely noticeable as it runs in parallel with loading and initializing the UI framework.

No server/build required

No need for a build process or even a web server. Just use static files, open in a browser and hit refresh :-). Or run Browsersync in watch mode for auto-reload.

ATTENTION! This is all good for dev environment only. Before going to production, you still need to setup webpack/rollup/eslint/karma/whatever and run a proper build. It is not a good idea to transpile your code in-browser in production (unless it is only required for a small number of older browsers - but we are not there yet :-).

Installation

There is nothing to install, just include a link to getlibs script on CDN -

<script src="https://unpkg.com/getlibs"></script>

Usage

Organize your code as separate modules and call System.import() to load the app.

<script>
    System.import('./main.js');
</script>

Or use <script type="x-module">...</script> to put everything into index.html

ES5/require()

var compile = require('lodash/template'),
    template = require('./hello.tpl'),
    data = require('./hello.json'),
    render = compile(template);

document.getElementById('app').innerHTML = render(data);

[Full Source] [Open in browser]

ES6/import

import React from 'react';
import ReactDOM from 'react-dom';
const msg = 'Hello World!';

ReactDOM.render(<h1>{msg}</h1>, document.getElementById('app'));

[Full Source] [Open in browser]

Typescript

import {Component} from '@angular/core';

@Component({
    selector: '#app',
    templateUrl: './app.component.html'
})

export class AppComponent {
    msg = 'Hello World!';
}

[Full Source] [Open in browser]

Running from filesystem

You will get cross origin errors if you open the examples in chrome directly from the filesystem. To allow file access in chrome lauch it with --allow-file-access-from-files flag (more info).

How it works

getlibs is based on SystemJS module loader. Instead of typical setup where it looks for external packages in node_modules directory, getlibs is configured to load libraries directly from NPM (via unpkg.com) or cdnjs.com, if available.

About

SystemJS is a module loader developed by Guy Bedford.

getlibs is a bundle of SystemJS with a custom config - maintained by ActiveWidgets.

getlibs's People

Contributors

Stargazers

Watchers

Forkers

gi972 stefcab work-prjs json2d twilson63 afrog33k billiegoose jipingwang iam-medvedev

getlibs's Issues

My own modules

Do i always need to import my own modules through System.import('./...js') ?

Better handling of unpkg.com 302 redirects

I just opened a case ModuleLoader/es-module-loader#538 that might be of interest.

ES6 module exports on .vue files

Hello and thank you for making this, it looks very promising.

I tried getlibs on a Vue + TypeScript project and got some trouble with single file components .vue files

index.html:

<!DOCTYPE html>
<html>
<head>
	<script src="https://unpkg.com/getlibs"></script>
</head>
<body>
<div id="app">Loading...</div>

<script>
	System.import('./main.ts')
</script>
</body>
</html>

main.ts:

import Vue from 'vue'
import App from './components/App.vue'

new Vue({
	el: '#app',
	render: h => h(App)
})

App.vue:

<template>
	<div id="app">
		Hello {{ name }}
	</div>
</template>

<script>
	export default {
		data(){
			return { name: "Vue" }
		}
	}
</script>

gives me

Error: module is not defined
  Evaluating http://localhost:5000/components/App.vue
  Evaluating http://localhost:5000/main.ts
  Loading ./main.ts`

The App.vue!transpiled file :

(function(System, SystemJS) {"use strict";

System.register([], function (_export, _context) {
   "use strict";

   return {
   	setters: [],
   	execute: function () {
   		_export("default", {
   			data: function data() {
   				return { name: "Vue" };
   			}
   		});

   		module.exports.template = "\r\n\t<div id=\"app\">\r\n\t\tHello {{ name }}\r\n\t</div>\r\n";
   	}
   };
});
})(System, System);

It looks like it should export with _export.template instead of module.exports.template

unpkg is not loading getlibs

Trying to browse any website using getlibs will currently lead to the following error:

Loading failed for the <script> with source “https://unpkg.com/getlibs”.

way to permanently disable cdnjs ?

Someone must have recently added module (react-contextmenu) to cdnjs recently, because it broke my app. It used to fetch react-contextmenu/dist/react-contextmenu.js from unpkg.com but once the cdnjs version was uploaded it tried to get it from cdnjs but that path /dist/react-contextmenu.js didn't work because cdnjs doesn't copy the package folder structure like unpkg does.

Or at least I think that's what happened. Anyhoo... I really have no love for cdnjs because I find unpkg much more predictable and if you've got some spare cycles I'd love a way to just disable the cdnjs option bc it's only caused me trouble. :)

material2 Failed to load resource: the server responded with a status of 404

I downloaded an examples [material2](https://github.com/angular/material2/tree/master/src/demo-app) tried `getlibs, but had exception:
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (theme.css, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (main.ts, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (index.ts, line 0)
[Error] Unhandled Promise Rejection: Error: Fetch error: 404 Not Found
Instantiating http://localhost:63342/main/index.ts
Loading http://localhost:63342/main.ts
Loading ./main.ts
(anonymous function) (min.js:2:231)
promiseReactionJob

can you help me ?

Better support for node core modules?

I'm trying to use a lot of modules that were originally written for browserify and really jumping through a lot of hoops. Is that a use case you'd be willing to consider? I believe it would be a matter of adding new entries in getlibs/config/ for assert, util, and so on that point at the correct browserify shims.

  System.config({
    map: {
      'react': 'https://unpkg.com/[email protected]/umd/react.development.js',
      'react-dom': 'https://unpkg.com/[email protected]/umd/react-dom.development.js'
    }
  })

react-dom loads fine I think, but I keep running into a 404 error with react:

https://cdnjs.cloudflare.com/ajax/libs/react/[email protected]/umd/react.development.js

How come it starts with "https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1" and how do I override that?

activewidgets / getlibs Goto Github PK

getlibs's Introduction

All front-end libraries

Write modern javascript (or typescript)

No server/build required

Installation

Usage

ES5/require()

ES6/import

Typescript

Running from filesystem

How it works

About

getlibs's People

Contributors

Stargazers

Watchers

Forkers

getlibs's Issues

Recommend Projects

Recommend Topics

Recommend Org