ApplicationPrototype Thirdparty

What is it?

Three SGApps.IO products for the application-prototype framework, and the modules and wrappers around them -- three tiers, and every card below carries a badge saying which is which. SGApps.IO products -- the Spreadsheet, the Writer and the Packer -- are original software developed in-house by SGApps.IO: their formula engine, document model, pagination, OOXML / ODF readers and writers, ZIP / TAR / 7z containers and LZMA codec are all our own code (proprietary, source-available). SGApps.IO modules are Apache-2.0 infrastructure we wrote: the iframe sandbox, and our integration code around CodeMirror and JSZip. Third-party wrappers are thin Application.require() adapters that make 24 open-source libraries (amCharts 4, PDF.js, Tesseract.js, OpenCV.js, SQL.js, Xterm.js, CKEditor 4 / 5, SVG-Edit, JsBarcode, ZXing, ...) load lazily and behave like every other module; each is labelled with its upstream project and licence.

SGApps.IO products Proprietary, source-available

Original software developed from scratch by SGApps.IO. No third-party runtime code: the only things they load are the application-prototype framework (also ours) and, for packing exports, the Packer. Proprietary, source-available -- the source is published for evaluation; using them in a product needs an agreement with SGApps.IO.

All modules

36 module names registered by modules/lib.js -- 31 modules, CKEditor 5 contributing six names -- each module with a documentation page and at least one playground example (35 in all). The badge on every card says who wrote what.

Live examples

A selection of the playground pages, embedded in preview mode -- the three SGApps.IO products first, then the Code Editor and a few of the wrappers. They load the framework from the SGApps CDN (https://cdn.sgapps.io/components/application-prototype) and the modules and vendored libraries from ../modules and ../thirdparty -- serve the repository root (npm start) and every example runs on your checkout; on a docs-only site they fall back to the CDN copy of this repository. Each frame has an Edit in the playground button that opens the same page with its source in an editor.

Getting started

1. Clone the repository next to your site and run npm install once: the postinstall step fetches the 20 vendored libraries into thirdparty/ from bower-config.json. The framework itself comes from your application-prototype checkout (or the SGApps CDN).
2. Load ApplicationPrototype.js and ApplicationBuilder.js, register the framework modules, then the thirdparty modules through modules/lib.js.
3. Require any module by name.

<script src="/application-prototype/ApplicationPrototype.js"></script>
<script src="/application-prototype/ApplicationBuilder.js"></script>
<script>
var App = new ApplicationBuilder({
    onready: function () {
        var App = this;
        App.modulePath('/application-prototype/constructors');
        App.debugEnabled(true);
        App.require(['extensions/prototype', 'lib'], function (libs) {
            libs.lib();                                            // framework modules by name
            App.require('/application-prototype-thirdparty/modules/lib.js').then(function (loader) {
                loader();                                          // the 34 thirdparty modules by name
                App.require('editors/spreadsheet').then(function (Spreadsheet) {
                    var sheet = Spreadsheet({ container: document.getElementById('mount'), rows: 100, cols: 26 });
                    sheet.whenLoaded().then(function () {
                        sheet.value('A1', 'Total');
                        sheet.value('B1', '=SUM(B2:B10)');
                    });
                });
            });
        });
    }
});
</script>

The Getting Started page explains every step, the two ways of resolving module names and how the wrappers load their libraries; each module page has a Use Cases section with copy-paste snippets.

npm start                     # this page + the docs at http://localhost:3000/ and /docs/
npm run docs-site-published   # serve docs/ alone, the layout of a published docs-only site
npm test                      # lint the documentation (links, sidebar, playground registry, this page)
npm run docs                  # regenerate the JSDoc API reference into documentation/