<img src="media/banner-docs.svg" alt="ApplicationPrototype Thirdparty Documentation">

ApplicationPrototype Thirdparty

• Three SGApps.IO products, written in-house from scratch, plus the approved third-party tier of the SGApps.IO front-end platform. The products -- an Excel-like Spreadsheet with its own formula engine, a Word-like Writer with its own DOCX reader and writer, and a Packer* with its own ZIP / TAR / 7z containers and LZMA codec -- are about 34,000 lines of original SGApps.IO JavaScript (plus 8,700 of CSS) with no third-party editor, parser, chart or archive library inside. Around them, for the application-prototype framework: an iframe sandbox of our own, a CodeMirror-based code editor, and thin Application.require() wrappers around 24 vendored open-source libraries (amCharts 4, PDF.js, Tesseract.js, OpenCV.js, SQL.js, Xterm.js, CKEditor 4 / 5, SVG-Edit, JsBarcode, ZXing, JSZip, LESS, html2canvas, Jimp, Potrace, ...) -- each labelled with its upstream project and licence. Every module is a plain ES5 file resolved by name through the framework's module loader -- Application.require('editors/spreadsheet') -- with no build step and no bundler.

SGApps.IO products

Original software developed in-house by SGApps.IO. They load nothing but the application-prototype framework (also ours) and, to pack their exports, the Packer. Proprietary, source-available: the source is published for evaluation and reference; using them in a product needs a written agreement -- sgapps.io/contact. Line counts are wc -l over the product files; grep -rn "require(" modules/editors modules/archiver/packer.js shows the only loads are the framework built-ins and the Packer.

Why application-prototype-thirdparty?

• Own products, not assembled ones -- the Spreadsheet, the Writer and the Packer contain no third-party code: no SheetJS or Handsontable, no CKEditor, TinyMCE, Quill or ProseMirror, no JSZip, pako or lzma-js. What they need beyond the browser, we wrote
• Provenance on every page -- this page, the landing page and the sidebar group every module by provenance: an SGApps.IO product (proprietary, source-available), an SGApps.IO module built on an open-source library (Code Editor and <code-pretty> on CodeMirror, ZIP on JSZip; Apache-2.0), or a thin wrapper for a third-party library that keeps its own licence
• Uniform objects -- products, modules and wrappers alike return ApplicationPrototype instances, so every one has the same on(), once(), off(), emit(), bind() surface and the same whenLoaded() promise
• One registration call -- modules/lib.js maps 36 module names to files with Application.moduleRegister(); from then on App.require('editors/writer'), App.require('thirdparty/emulators/databases/sql.js'), ... resolve by name, are downloaded on first use and cached
• Isolation where it matters -- heavy libraries (PDF.js, SVG-Edit, CodeMirror) run inside the SGApps.IO gadgets/wrapper Blob iframe, so the host page never sees their globals or CSS
• Vendored, not linked -- 22 libraries live in thirdparty/ (frozen mirror sources, no CDN at runtime) and the CKEditor 5 builds and Jimp in thirdparty-builds/; the thirdparty/ tree is (re)built from bower-config.json by npm install
• A playground for every module -- the play button in the corner of this site opens playground.html: an editable page per module that runs on the working copy (35 examples)
• Same code style as the framework -- ES5, var and function, plain <script> tags; works with application-prototype 1.31.0 from the SGApps CDN (what the playground runs on) and with the 1.25.x line pinned in package.json

Quick Example

// App = a booted ApplicationBuilder on which the framework's lib() has run (see Getting Started)
App.require('/application-prototype-thirdparty/modules/lib.js').then(function (loader) {
    loader(); // Application.moduleRegister('/application-prototype-thirdparty/modules', ['archiver/zip', 'archiver/packer', ...])

    App.require('archiver/packer').then(function (Packer) {
        var pack = Packer('zip');                       // 'zip' | 'tar' | 'gzip' | 'tar.gz' | '7z'
        pack.addFile('hello.txt', 'Hello World!');
        pack.addFile('data/report.json', JSON.stringify({ ok: true }));
        pack.generate('blob').then(function (blob) {
            var a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = 'archive.zip';
            a.click();
        });
    });

    App.require('editors/spreadsheet').then(function (Spreadsheet) {
        var sheet = Spreadsheet({ container: document.getElementById('sheet'), rows: 100, cols: 26 });
        sheet.whenLoaded().then(function () {
            sheet.value('A1', 'Total');
            sheet.value('B1', '=SUM(B2:B10)');
        });
    });
});

Module Overview

• SGApps.IO modules* (Apache-2.0) -- infrastructure we wrote for the framework; the Wrapper is entirely ours, the others are our integration code around a credited open-source library:

• Third-party wrappers* -- thin loaders (typically a few dozen lines, Apache-2.0 like the rest of our infrastructure code) that fetch a vendored open-source library on first use and hand it back as a module. The libraries are not our work; each keeps its upstream licence:

// modules/lib.js -- module.exports = loader
loader.list = [{
    path: __dirname,                       // the folder lib.js was loaded from
    modules: [
        'archiver/zip', 'archiver/packer',
        'editors/spreadsheet', 'editors/writer',
        'custom-elements/code-pretty',
        'gadgets/code-editor', 'gadgets/wrapper',
        'thirdparty/archive/jszip', 'thirdparty/archive/lz-string',
        'thirdparty/charts/amcharts4',
        'thirdparty/convert/image/qrcode/generator', 'thirdparty/convert/image/qrcode/reader',
        'thirdparty/convert/image/barcode/generator', 'thirdparty/convert/image/barcode/reader',
        'thirdparty/convert/image/ocr/tesseract', 'thirdparty/convert/image/exif/reader',
        'thirdparty/convert/image/vectorize/potrace', 'thirdparty/convert/image/vectorize/svg/path-commander',
        'thirdparty/convert/image/vectorize/imagetracer', 'thirdparty/convert/image/editor/jimp',
        'thirdparty/convert/less/css/less', 'thirdparty/convert/pdf/reader',
        'thirdparty/convert/web/canvas/html2canvas',
        'thirdparty/emulators/terminal/xterm', 'thirdparty/emulators/image/opencv', 'thirdparty/emulators/databases/sql.js',
        'thirdparty/gui/animations/animate-css', 'thirdparty/gui/controls/dat-gui',
        'thirdparty/gui/wysiwyg/html/ckeditor4',
        'thirdparty/gui/wysiwyg/html/ckeditor5', 'thirdparty/gui/wysiwyg/html/ckeditor5/classic',
        'thirdparty/gui/wysiwyg/html/ckeditor5/inline', 'thirdparty/gui/wysiwyg/html/ckeditor5/balloon',
        'thirdparty/gui/wysiwyg/html/ckeditor5/balloon-block', 'thirdparty/gui/wysiwyg/html/ckeditor5/document',
        'thirdparty/gui/image/svg/editor'
    ]
}];

Every module page has a Use Cases section and can be opened in the playground (the play button in the corner lists them by category); the two editors also have a workflow document each (Workflow_SpreadSheet.md, Workflow_Writer.md) at the repository root.

Getting Started

The modules need the framework and a static server. Serve this repository next to your site (git clone, here at /application-prototype-thirdparty/) and register the modules with a root-relative path or an absolute URL -- modules/lib.js registers the module names under its own folder (__dirname), and every module loads its sub-files (editors/spreadsheet/engine.js, ../thirdparty/xterm/dist/xterm.js, ...) relative to its own file with module.require().

<!-- Browser: the framework's two script tags -->
<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-prototype 1.25.9-1.25.15 throw on the first require() unless this was called (later versions do not)

            // 1. the framework's built-in modules (async, request, uri-load, custom-elements, ...) by name
            App.require(['extensions/prototype', 'lib'], function (libs) {
                libs.lib();

                // 2. the thirdparty modules by name: modules/lib.js -> Application.moduleRegister('/application-prototype-thirdparty/modules', [...])
                App.require('/application-prototype-thirdparty/modules/lib.js').then(function (loader) {
                    loader();

                    // 3. any module
                    App.require('editors/writer').then(function (Writer) {
                        var editor = Writer({ container: document.getElementById('editor'), layoutMode: 'document', theme: 'light' });
                        editor.whenLoaded().then(function () {
                            editor.setContent('<h1>Hello</h1><p>The document editor is ready.</p>');
                        });
                    }, console.error);
                }, console.error);
            });
        }
    });
</script>

The playground pages boot the same way (the framework from https://cdn.sgapps.io/components/application-prototype, the modules and the vendored libraries from ../modules and ../thirdparty of the served repository -- or from the CDN copy of this repository when only docs/ is served), so every snippet on the module pages can be pasted into a page booted like the one above.
Full Getting Started Guide | Playground

License

This repository has three licensing tiers (the LICENSE file at the repository root spells them out):

1. SGApps.IO products -- proprietary, source-available. modules/editors/spreadsheet.js + modules/editors/spreadsheet/, modules/editors/writer.js + modules/editors/writer/ and modules/archiver/packer.js are original products of SGApps.IO, Copyright 2019-2026 Sergiu Gordienco Vasile / SGApps.IO, all rights reserved. The source is published for evaluation and reference; copying, modifying, redistributing or using them in a product requires a written agreement -- see the LICENSE inside each folder and sgapps.io/contact.
2. Everything else written for this repository -- Apache License 2.0: modules/lib.js, the gadgets, <code-pretty>, archiver/zip, the wrappers, the documentation and scripts. Redistributions must keep the attribution in NOTICE (Section 4(d)).
3. Vendored third-party libraries -- their own licences. thirdparty/, thirdparty-builds/, the CodeMirror copy under modules/gadgets/code-editor/ and the Docsify and Prism copies under docs/vendor/ are distributed under the licence of each upstream project: amCharts 4 (free linkware licence -- the branding link on the charts must stay), Animate.css (MIT), CKEditor 4 (GPL-2.0-or-later / LGPL-2.1 / MPL-1.1), CKEditor 5 (GPL-2.0-or-later or a commercial licence), CodeMirror (MIT), dat.GUI (Apache-2.0), Docsify (MIT), exif.js (MIT), html2canvas (MIT), imagetracerjs (Unlicense), Jimp (MIT), JsBarcode (MIT), JSZip (MIT or GPL-3.0), LESS (Apache-2.0), lz-string (WTFPL), OpenCV (BSD-3-Clause for the vendored asm.js build; the node-opencv tree it ships in is MIT -- verify before redistributing), PDF.js 2.7 (Apache-2.0), potrace (GPL-2.0), Prism (MIT), qrcode-generator (MIT), jsQR (Apache-2.0), SQL.js (MIT), SVG-Edit (MIT), svg-path-commander (MIT), Tesseract.js (Apache-2.0), Xterm.js (MIT), ZXing for JS (Apache-2.0). Check the LICENSE file inside each directory before redistributing.

package.json therefore says "license": "SEE LICENSE IN LICENSE".
By Sergiu Gordienco | sgapps.io