MediaWiki Integration

[WolfgangFahl]

Expected Behavior

It should be easily possible to create a Mediawiki extension for OpenJscad

Actual Behavior

It's - well - complicated ...

Steps to Reproduce the Problem

1. Try creating a MediaWiki extension see e.g. http://wiki.bitplan.com/index.php/ParametricLampShade
2. Find out that this is only supporting and old version of OpenJscad
3. ask for help at https://openjscad.nodebb.com/topic/98/displaying-jscad-designs-in-media-wiki-or-plain-html-for-a-start
4. get no answer
5. ask for help at https://stackoverflow.com/questions/56520743/integrating-openjscad-into-mediawiki/56520809#56520809
6. get just one helpful hint https://stackoverflow.com/a/56552702/1497139 which is not a complete answer
7. try getting the MediaWiki extension going at https://phabricator.wikimedia.org/T225532
8. start a page for it at https://www.mediawiki.org/wiki/Extension:OpenJsCad
9. create an alpha version of the extension visible at http://s.bitplan.com/wiki/index.php/Template:Jscad

Specifications

• Version: Three possible options - old version from 2013, current v1.x new v2.x
• Platform: any with a browser
• Environment: Firefox or chrome

[WolfgangFahl]

I'd love to try out the hints

1. Version 2 demo by kaosat
2. Version 1 standalone by Johne Cole

For both I need some crucial information that seems to be missing given my background, knowledge and environment. How do I get access to the necessary JavaScript code?

The current set at http://s.bitplan.com/wiki/extensions/OpenJsCad/ is:

1. csg.js
2. lightgl.js
3. openjscad.js (patched for MediaWiki use)
4. openjscad.css

What are the sets for the two hints above and where do i find them or how can i create them?

E.g. how is ./dist/jscad-full.min.js created? E.g. how can the dependencies of web/dist/openjscad.umd.js be resolved in a static non npm-environment?

[WolfgangFahl]

I tried:

git clone https://github.com/jscad/OpenJSCAD.org
cd OpenJSCAD.org
sudo make install

and it fails with

test -d /usr/local/lib/node_modules//openscad-openjscad-translator || npm -g install openscad-openjscad-translator
#test -d /usr/local/lib/node_modules//jquery || npm -g install jquery
scp openjscad /usr/local/bin/
cp: cannot stat 'openjscad': No such file or directory
Makefile:11: recipe for target 'install' failed
make: *** [install] Error 1

[WolfgangFahl]

The so called "standalone" umd version has the following first lines:

head openjscad.umd.js 
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.openjscad = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
const WebWorkify = require('webworkify')
const { CAG, CSG } = require('@jscad/csg')
const oscad = require('@jscad/csg/api')
const createJscadFunction = require('../code-loading/jscad-function')
const { replaceIncludes } = require('../code-loading/replaceIncludes')
const { resolveIncludesHttp } = require('../code-loading/resolveIncludesHttp')
const { toArray } = require('../utils/arrays')

How can this be made "standalone" in the sense of getting it work in a static non npm environment?

[WolfgangFahl]

Here are the 116 candidates of javscript files:

zeus:OpenJSCAD.org wf$find . -name *.js | wc -l
     116
zeus:OpenJSCAD.org wf$find . -name *.js 
./packages/cli/cli.js
./packages/cli/cli.test.js
./packages/cli/env.js
./packages/cli/generateOutputData.js
./packages/core/code-evaluation/rebuildSolids.js
./packages/core/code-loading/isCommonJsModule.js
./packages/core/code-loading/jscad-function.js
./packages/core/code-loading/jscad-worker.js
./packages/core/code-loading/registerJscadExtension.js
./packages/core/code-loading/replaceIncludes.js
./packages/core/code-loading/requireDesignFromModule.js
./packages/core/code-loading/requireDesignFromString.js
./packages/core/code-loading/requireDesignUtilsFs.js
./packages/core/code-loading/resolveIncludesFs.js
./packages/core/code-loading/resolveIncludesHttp.js
./packages/core/code-loading/validateDesignModule.js
./packages/core/io/convertToBlob.js
./packages/core/io/formats.js
./packages/core/io/prepareOutput.js
./packages/core/module.js
./packages/core/module.test.js
./packages/core/parameters/applyParameterDefinitions.js
./packages/core/parameters/getParameterDefinitions.js
./packages/core/parameters/getParameterDefinitionsAndValues.js
./packages/core/parameters/getParameterValuesFromParameters.js
./packages/core/parameters/getParameterValuesFromUIControls.js
./packages/core/utils/arrays.js
./packages/core/utils/mergeSolids.js
./packages/core/utils/version.js
./packages/desktop/index.js
./packages/desktop/src/app.js
./packages/desktop/src/core/code-analysis/ast-parents.js
./packages/desktop/src/core/code-analysis/foo.js
./packages/desktop/src/core/code-analysis/index.js
./packages/desktop/src/core/code-analysis/search.js
./packages/desktop/src/core/code-analysis/solidsFromAst.js
./packages/desktop/src/core/code-analysis/utils.js
./packages/desktop/src/core/code-evaluation/convertToSolid.js
./packages/desktop/src/core/code-evaluation/rebuildSolids.js
./packages/desktop/src/core/code-evaluation/rebuildSolidsWorker.js
./packages/desktop/src/core/code-loading/registerJscadExtension.js
./packages/desktop/src/core/code-loading/requireFromString.js
./packages/desktop/src/core/code-loading/requireUncached.js
./packages/desktop/src/core/code-loading/resolveDependencies.js
./packages/desktop/src/core/code-loading/scriptLoading.js
./packages/desktop/src/core/code-loading/vtreeApi.js
./packages/desktop/src/core/io/convertToBlob.js
./packages/desktop/src/core/io/exportUtils.js
./packages/desktop/src/core/io/formats.js
./packages/desktop/src/core/io/prepareOutput.js
./packages/desktop/src/core/io/saveDataToFs.js
./packages/desktop/src/core/parameters/getParameterValuesFromUIControls.js
./packages/desktop/src/sideEffects/appUpdates.js
./packages/desktop/src/sideEffects/dom.js
./packages/desktop/src/sideEffects/dragDrop.js
./packages/desktop/src/sideEffects/electronStore.js
./packages/desktop/src/sideEffects/fs.js
./packages/desktop/src/sideEffects/i18n.js
./packages/desktop/src/sideEffects/ipc.js
./packages/desktop/src/sideEffects/titleBar.js
./packages/desktop/src/sideEffects/worker.js
./packages/desktop/src/state.js
./packages/desktop/src/ui/actions.js
./packages/desktop/src/ui/design/actions.js
./packages/desktop/src/ui/design/reducers.js
./packages/desktop/src/ui/io/actions.js
./packages/desktop/src/ui/io/reducers.js
./packages/desktop/src/ui/reducers.js
./packages/desktop/src/ui/viewer/actions.js
./packages/desktop/src/ui/viewer/reducers.js
./packages/desktop/src/ui/views/createParameterControls2.js
./packages/desktop/src/ui/views/createParameterControls3.js
./packages/desktop/src/ui/views/designParameters.js
./packages/desktop/src/ui/views/main.js
./packages/desktop/src/ui/views/options.js
./packages/desktop/src/ui/views/shortcuts.js
./packages/desktop/src/ui/views/status.js
./packages/desktop/src/ui/views/viewer.js
./packages/desktop/src/utils/observable-utils/callbackToObservable.js
./packages/desktop/src/utils/observable-utils/withLatestFrom.js
./packages/desktop/src/utils/utils.js
./packages/examples/module-design/index.js
./packages/examples/module-design/mountPlate.js
./packages/web/dist/index.js
./packages/web/dist/min.js
./packages/web/dist/openjscad.umd.js
./packages/web/dist/opt.js
./packages/web/postInstall.js
./packages/web/src/io/conversionWorker.js
./packages/web/src/io/createConversionWorker.js
./packages/web/src/io/fileSystemApiErrorHandler.js
./packages/web/src/io/generateOutputFile.js
./packages/web/src/io/generateOutputFileBlobUrl.js
./packages/web/src/io/generateOutputFileFileSystem.js
./packages/web/src/io/utils.js
./packages/web/src/jscad/log.js
./packages/web/src/jscad/processor-bare.js
./packages/web/src/jscad/processor.js
./packages/web/src/ui/cookies.js
./packages/web/src/ui/detectBrowser.js
./packages/web/src/ui/dragDrop/helpers.js
./packages/web/src/ui/dragDrop/ui-drag-drop.js
./packages/web/src/ui/dragDrop/walkFileTree.js
./packages/web/src/ui/editor.js
./packages/web/src/ui/errorDispatcher.js
./packages/web/src/ui/examples.js
./packages/web/src/ui/index.js
./packages/web/src/ui/min.js
./packages/web/src/ui/opt.js
./packages/web/src/ui/options.js
./packages/web/src/ui/umd.js
./packages/web/src/ui/urlHelpers.js
./packages/web/src/ui/viewer/jscad-viewer-helpers.js
./packages/web/src/ui/viewer/jscad-viewer-lightgl.js
./packages/web/src/ui/viewer/jscad-viewer.js
./packages/web/src/ui/viewer/lightgl.js

so how do I know which ones are needed?

[WolfgangFahl]

Maybe the set of files in "web" is what is needed?

find . -name "*.js" | wc -l
      33
zeus:web wf$find . -name "*.js" 
./dist/index.js
./dist/min.js
./dist/openjscad.umd.js
./dist/opt.js
./postInstall.js
./src/io/conversionWorker.js
./src/io/createConversionWorker.js
./src/io/fileSystemApiErrorHandler.js
./src/io/generateOutputFile.js
./src/io/generateOutputFileBlobUrl.js
./src/io/generateOutputFileFileSystem.js
./src/io/utils.js
./src/jscad/log.js
./src/jscad/processor-bare.js
./src/jscad/processor.js
./src/ui/cookies.js
./src/ui/detectBrowser.js
./src/ui/dragDrop/helpers.js
./src/ui/dragDrop/ui-drag-drop.js
./src/ui/dragDrop/walkFileTree.js
./src/ui/editor.js
./src/ui/errorDispatcher.js
./src/ui/examples.js
./src/ui/index.js
./src/ui/min.js
./src/ui/opt.js
./src/ui/options.js
./src/ui/umd.js
./src/ui/urlHelpers.js
./src/ui/viewer/jscad-viewer-helpers.js
./src/ui/viewer/jscad-viewer-lightgl.js
./src/ui/viewer/jscad-viewer.js
./src/ui/viewer/lightgl.js

[z3dev]

I mentioned the ‘dist’ directory before.

Basically, all the source code is ‘bundled’ together into one BIG JavaScript file.

In order to use JSCAD inside the wiki HTML, you will need one of those, or something new.

[WolfgangFahl]

@z3dev - thank you for looking into this.

In my environment the "make" did not work so i can only go from what is there:

find . -name dist
./packages/web/dist

there are four files in that directory:

ls -l
total 15728
-rw-r--r--  1 wf  staff  3377517 Jun 16 08:35 index.js
-rw-r--r--  1 wf  staff  1558065 Jun 16 08:35 min.js
-rw-r--r--  1 wf  staff  1551376 Jun 16 08:35 openjscad.umd.js
-rw-r--r--  1 wf  staff  1558414 Jun 16 08:35 opt.js

and as i mentioned the code of the umd one looks as if it references ../code-loading/... That is why I am double checking and still looking for a working set of files with a working example so that I can reproduce this in an Ubuntu 18.04 LTS and/or MacOS environment.

[z3dev]

@WolfgangFahl continue on... you are getting closer.

The project is created via NPM (Node Package Manager) so you will need to look at package.json (there are many) to understand how everything is merged together.

You are trying to use web based components so see the packages/web directory.

[WolfgangFahl]

The extension 3D https://www.mediawiki.org/wiki/Extension:3D might be a good starting point for finding out how to best proceed. It is an official Mediawiki extension and should have comparable installation needs. Also it is a workaround for the time being since at least the generated STL files can be shown this way.

[WolfgangFahl]

https://www.cgtk.co.uk/metalwork/reference/toolgrinding has nice example for an old style jscad file that might work.

[WolfgangFahl]

It's 2020 and i find it pretty frustrating that there is neithere a V2 version nor a V1 version which is suitable for publishing designs. I think we need a community of people exchanging stuff to make progress.

[sdaau]

@WolfgangFahl - had a similar problem as you in https://stackoverflow.com/questions/56520743/integrating-openjscad-into-mediawiki - in the sense that I could not find this:

For a start a plain html page with a bit of javascript would do for me.

Had some trouble getting the web example index.html to work, but I think I managed it now: there is a wrong path if you want to run it from a local server - please see https://github.com/jscad/OpenJSCAD.org/issues/632

[WolfgangFahl]

@sdaau - the desert starts living - this is great. thanks for your contribution.