GithubHelp home page GithubHelp logo

cbuild's Introduction

Charto

build status

This is an online JavaScript-based GIS platform under heavy development, with these goals:

Small, efficient and MIT-licensed.
  • No bloat. Keep entire dependencies hierarchy minimal.
  • Same applies to devDependencies.
  • Use suitable caching, compression, data structures and algorithms.
Easy to use.
  • Targeting users who could handle desktop GIS software.
  • Convention over configuration. Allow, but don't require changing settings.
No need to install, register or login.
  • Back-end is optional, anything serving static files over HTTP is enough.
  • Compute everything client-side when possible.
  • Support local file import and export.
Easy to extend or use parts in other projects.
  • Aggressively split everything into general-purpose NPM packages.
  • Simplest possible monorepo structure allows heavy overall customization for specific projects.
  • Keep all parts small and documented.
  • Tooling choice criteria:
    1. Compatibility with other goals and tooling.
    2. Size and efficiency. Is the tool actually needed?
    3. Developer ease of use.
    4. Popularity.
Latest and greatest technologies (as of Q1 2018).
  • ES6 syntax, statically typed using TypeScript.
  • mobx-state-tree and classy-mst for easy state management without boilerplate.
  • Leaflet maps with vector tiles and WebGL rendering.
  • PhosphorJS and phosphor-float-area for easy UI customization by end users.
  • SystemJS and cbuild for ES6 imports and bundling without backend requirements.
  • dgrid for one tree grid widget with all the bells and whistles, because there's still no suitably licensed alternative.
  • React for easy custom UI components.

Click on the goals to see what they mean in practice.

This is a single repository containing several Charto packages. It follows the alle model, with packages under packages/node_modules. Most devDependencies are only in the top-level package.json.

Contents:

Package NPM Description
cgeo npm version Geographic data types
cgeo-calc npm version computational geometry algorithms for cgeo types
cgeo-cpak npm version cpak import/export for cgeo types
cgeo-wkb npm version WKB import/export for cgeo types
cgeo-wkt npm version WKT export for cgeo types
charto-3d npm version Small WebGL helper library
charto-leaflet npm version Useful classes for Leaflet
charto-model npm version Geodata model using mobx-state-tree
charto-render npm version Geodata renderer
geotree npm version Geodata storage
mst-dstore npm version dstore implementation backed by mobx-state-tree
phosphor-dgrid npm version Full-featured Dojo-based grid widget for PhosphorJS
phosphor-leaflet npm version Leaflet widget for PhosphorJS

Getting started

git clone https://github.com/charto/charto.git
cd charto
npm install
npm run build
npm start

Then navigate to: http://localhost:8080/

The frontend uses SystemJS. It works directly from the public directory of any HTTP server. With an IDE that supports compileOnSave (eg. atom-typescript or TypeScript for VS Code) the frontend page always stays up to date while editing TypeScript source code.

Contributing

Adding new files

Source code file extensions should always be .ts or .tsx or the compiler may ignore the code, breaking references to it from elsewhere.

Files containing classes or types intended as part of the public API, should be referenced in the package's index.ts like this:

export { MyClass } from './MyClass';

The corresponding file may be named MyClass.ts or MyClass.tsx.

Adding new external NPM packages

According to alle, packages are installed in the repository top-level node_modules directory.

Since the project uses TypeScript, usually you also want to install typings. For example:

npm install --save react-leaflet
npm install --save @types/react-leaflet

Next, you should use the package. Easiest way is to add somewhere:

export * from 'react-leaflet';

Exporting the package contents causes it to be used in transpiled JSON. If you use a TypeScript IDE, saving the file will already have transpiled it. Otherwise re-build the frontend from the command line:

npm run build:frontend

Now, config-npm.js needs updating so SystemJS can find files in the new package. Creating a production bundle updates it automatically. Run the commands:

cd bundler
npm install
cd ..
npm run bundle

Now that the bundler is installed, next time the first 3 commands (cd and npm install) are not needed.

It's important that the new package is somehow used in the code, or the bundler will still ignore it and not update the necessary config paths.

This also bundles the software for production, meaning that reloading the page in a browser will load the bundle instead of any more recent changes. To fix that, delete or rename dist/bundle.js.

License

The MIT License

Copyright (c) 2017-2018 BusFaster Ltd

cbuild's People

Contributors

jjrv avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

direktspeed

cbuild's Issues

Gitter

Would you mind jumping on Gitter. I have a collaboration idea I want to run by you. I've sent you a PM

Building with xlsx npm module fails

I run into this yesterday:

> cbuild -d -v -m systemjs-hot-reloader -o dist/bundle.js -C config-npm.js

Bundling for development (NODE_ENV = undefined and --debug set)

Build error:
Error on fetch for fs.js at file:///Users/jta/tmp/hierarchicaltable-example-app/fs.js
	Loading node_modules/xlsx/xlsx.js
	Loading node_modules/makeMaps/dist/ui_components/import_wizard/FileUploadView.js
	Loading node_modules/makeMaps/dist/ui_components/import_wizard/LayerImportWizard.js
	Loading node_modules/makeMaps/dist/MakeMaps.js
	Loading dist/index.js
	Error: ENOENT: no such file or directory, open '/Users/jta/tmp/hierarchicaltable-example-app/fs.js'
    at Error (native)

I believe the module https://github.com/SheetJS/js-xlsx is the culprit. It would seem cbuild doesn't see node's internal modules correctly and tries to find them in the project folders?

I can make a complete test case later if you wish, but wanted to report this already...

Support for reloading changes in node_modules

I have a use case of developing an app and a library separately.

However, reloader does not reload files when they change if they are not under src.

I tried using module level node_modules, since node and TypeScript support loading libraries from importing module's folder under node_modules folder.

However config reloader doesn't check there when finding imported paths, and I couldn't get that part working.

So, I have a structure like this:

/node_modules/[for regular libraries]
/src/[my app files]
/src/node_modules/my_library

Is there any way to either get cbuild to check also source folder's node_modules or config reloader to reload also regular node_modules files?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.