I am working on a nicer workaround for deleting from the cache. Currently I am using try-catch to pick up a failed delete. But I can do better. So I am introducing a single-file WebPack plugin called
require.tryCacheDelete. If the module is found, the statement is immediately replaced with a (function(){delete __webpack_require__.c[id]})($id);. Why an IIFE? Well, those are easier to use for source-code rewriting :). WebPack's source-replace mechanism is a bit fidgety. However if I find a good way, I'lld rop the IIFE aproach alltogether and just have the delete statement.
When that one is through, I'll begin working on namespace resolution. For that I need to write a custom resolver, but according to the WebPack author, this is just a little function that tells webpack the resulting file, or if it does not exist.
After that I will implement
_async flavors.<?php
require_once_async("./foo.php", function($foo) {/*...*/}, "someName");
All the
_async flavors are behaviour-identical to their parent and take an optional third argument for a bundle name.
There is also
webpack_ensure($modules, $cb, $name), which maps directly to require.ensure(modules, cb, name)
And
webpack_include maps directly to require.include(module).
So yeah, thats the current status.
This looks incredibly ugly. But:
<?php
include "./demox.php"; // Does not exist.Becomes now:
(function /*ClearRequire*/ () {
(undefined /* module */);;
return tools.valueFactory.coerce(/*noop*/((function /*uniterIncludeWarning*/(){
if(console.warn) {
console.warn("Module (./demox.php) was not found.");
} else {
console.log('Warning: '+"Module (./demox.php) was not found.");
}
return null;
})()));
})();
I copied this from the raw output bundle
But this is working - so I am reeeeally happy.
I found a perfect editor to go along with Parsing and Transpiler: https://github.com/SjonHortensius/LRTEditor . The author uses shjs for syntax, but once I get DIFM working right, Ill use that for myself
@IngwiePhoenix after a bit of experimenting, as you mentioned transpiler doesn't quite fit with this kind of transform (where you'd only want to transform certain AST nodes in the output string - it ends up being quite messy) so I've published a new library highlighted (https://github.com/asmblah/highlighted) that fits a bit better, you can see a simple example here: https://tonicdev.com/56d243783836000d00e1229a/56d24390ea02570d0039055f
Hope this helps!
@asmblah yup! I saw that haha. It popped up on github and decided to give you a little nudge ont witter because it wasnt even a hour from your last commit when i saw it. Looking really good - and what I like the most: Line numbers, offsets! I can do much better error reporting in my webpack plugin, maybe! :)
Here is the scenario and you will immediately see what I mean:
return !/* require.ensure */(function() {
var x = tools.createClosure(function($_) {
var scope = this;
scope.getVariable("_").setValue($_.getValue());
}, scope)
var modules = [];
modules.push(__webpack_require__(5));
return x.getNative().apply(this, modules);
}(__webpack_require__));
})();This is a generated function, passed through webpack, and this is the ugly result. What I need is to coerce modules to objects, OR to call the closure correctly x).
i just wrapped the require calls in that, and boosh, it works.
It works.
:)
I am REALLY happy right now. But it turns out that it works.
There are only two things missing: a way to have missing modules just produce
NULL instead of an exception, and namespaces via Composer using a custom ComposerModuleResolver. But that is upfront now!
For now, look at this. Its ugly. But it works x)
/***/ function(module, exports, __webpack_require__) {
// Imports
var phprt = __webpack_require__(1);
var $ENV = __webpack_require__(94);
// Vars (minify-friendly)
var OD = Object.defineProperty;
// Build the context
var makeCtx = phprt.compile(function(stdin, stdout, stderr, tools, namespace) {
var namespaceScope = tools.createNamespaceScope(namespace),
namespaceResult, scope = tools.globalScope,
currentClass = null;
stdout.write(tools.valueFactory.createString("Hello, world!").coerceToString().getNative());
(function /*include_async*/ () {
(undefined /* module */);
return !/* require.ensure */(function() {
var cb = tools.createClosure(function($_) {
var scope = this;
scope.getVariable("_").setValue($_.getValue());
stdout.write(tools.valueFactory.createString("You should see $_ being an object...").coerceToString().getNative());
stdout.write(scope.getVariable("_").getValue().callMethod(tools.valueFactory.createBarewordString("toString").getNative(), []).coerceToString().getNative());
}, scope)
var modules = [];
modules.push(tools.valueFactory.coerce(__webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"i-am-missing\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()))));
return cb.getNative().apply(this, modules);
}(__webpack_require__));
})();
return tools.valueFactory.createNull();
});
var options = $ENV.makeOptions({
path: "<internal: " + module.id + ">"
});
var ctx = makeCtx(options, $ENV.getEnvironment());
// Expose the exporter object
// If the underlying code would assign a primitive, we can't assign properties to it.
// So we make an abstraction!
var exp1 = {},
exp2;
ctx.expose(exp1, "exports");
exp2 = new Object(exp2);
// Run and return.
var rt = ctx.execute();
OD(exp2, "__phpModule", {
// Babel style __es6Module
value: true,
variable: false
});
OD(exp2, "__phpReturn", {
value: rt,
variable: false
});
OD(exp2, "__phpExports", {
value: exp1,
variable: false
});
module.exports = exp2;
/***/ }
Hi @IngwiePhoenix, hope all's going well with you. Great work on the Webpack plugin - I'm looking forward to having a play with it :smile:
Just thought I'd let you know, I've published some complex changes to PHPCore so that it now supports defining a class in JS, installing that class into the PHP runtime and then extending that JS-defined class with a PHP class (eg.
Just thought I'd let you know, I've published some complex changes to PHPCore so that it now supports defining a class in JS, installing that class into the PHP runtime and then extending that JS-defined class with a PHP class (eg.
class MyPhpClass extends MyJsClass), you can see an example here: https://github.com/uniter/phpcore/blob/master/test/integration/statements/classTest.js#L26
I've also added the new concept of "auto-coercing" and "non-auto-coercing" classes - this basically means that you can use the simpler auto-coercing mode by default (when calling out from PHP to a JS function, it will automatically unwrap any PHP argument values to JS ones) but if you need the non-coercing mode (eg. to distinguish between
float and int) then that can be opted into.
@asmblah Just saw your commits and PRs on the various parts of Uniter! I am currently at my parent’s place, but I can give you an example - more of a concept - of what ES6 translation might do or look like. Now, I havent worked with Uniter for a while, so excuse me if I get some function names wrong or not at all - I am guessing them. x)
<?php
namespace NS;
class MyClass {
function __construct() {}
}And this:
import {
createNamespace,
createValue,
context
} from "phpruntime";
const ctx = context();
const NS = createNamespace("NS");
class MyClass {
construct() {}
}
NS.addClass("MyClass", MyClass);
// Export this to other modules:
export default = { NS }; // same as: {"NS": NS}
// JavaScript does not have namespaces...
// BUT module paths act as such. So export it - as such.
export MyClass;
// In another module, we may see:
import {
createNamespace,
createValue,
context,
isNamespace
} from "phpruntime";
import {
NS as $php_ns_NS
} from "othermodule.js";
const ctx = context();
// I.e.: function a() { $c = new \NS\MyClass(); }
function a() {
var $c = createValue($php_ns_NS.getClass("MyClass"));
}
export default { a };
export a;
Again, this is just a concept.
The idea is:
- Capture each namespace reference and create an import statement for it.
- Try to use "native" elements if possible, like classes in ES6.
The default export may contain all the exports related to PHP, the other, named exports, may be for use in JavaScript.
The difference with the
{} operator is simple:
var a, b, c;
export a; export b; export c;
export default { a, b, c };
// Results into either:
import a from "…";
// Or:
import {a} from "…";
The latter is using the off-object operator. Yes, this works outside of import too:
var a = {foo: "bar", baz: "qux"};
var {foo} = a;
var {foo, baz} = a;
Also,
export class A {…} is also possible.
ES6’s module stuff is pretty wicked.
So in the ES6 make-over, I will especially utilize this…a lot.
This is especially useful for treeshaking.
Ingwie@Ingwies-MBP.fritz.box ~/W/T/treeshaking $ cat a.js
export function foo() {
console.log("Foo!");
return 1;
}
Ingwie@Ingwies-MBP.fritz.box ~/W/T/treeshaking $ cat b.js
export function bar() {
console.log("Bar!");
return 2;
}
Ingwie@Ingwies-MBP.fritz.box ~/W/T/treeshaking $ cat main.js
import {foo} from "./a";
import {bar} from "./b";
foo();
Ingwie@Ingwies-MBP.fritz.box ~/W/T/treeshaking $ cat out.js
'use strict';
function foo() {
console.log("Foo!");
return 1;
}
foo();
See what happened? :)
And apparently the draft for import has slightly changed, Oops!
export function a() {…} will NOT export this function as default but as a.
But you get the idea, anyway. :)