I just realized Scratch's license would apply if I just did it here. It's probably smartest to just do it like this.

mybearworld wrote:

skymover1239 wrote:

I don't think so.

Uh, that's weird.

milleripl.com/blogs/copyrights/copyrights-v-opensource wrote:

Copyright is automatical as soon as a coder writes it down (on paper or digitally)

Honestly, I would just include the MIT license. The license does say not remove the copyright. Whoever created it probably knows what he's talking about.

mybearworld wrote:

MagicCrayon9342 wrote:

Also, It's less about you using the service. But the data collection! Generally, a service collecting data of those under that age shouldn't be done. So, that's why that's there.

Isn't source code exactly that: data?

Yes, source code is 100% user generated content. Data! But consider I've used google 5 years before I was allowed to.

I'm making the JavaScript version right now, and I'm making it a lot more regex based. It's really helpful for readability, editability and shortness, so I'm glad I decided to rewrite MMWS (and in a language that can handle regex way better!)

The JavaScript rewrite is done!


You can now simply use an <mmws> HTML tag, and it will automatically get converted to minified CSS and used. This is done once on page load, but can also be initiated again using the JavaScript function mwwsConvertTagsToCSS. All the resulting <style> elements will have a class of -mmws-converted and –mmws-from- and then the filename (with everything but a-zA-Z\-_ filtered out).

The CSS from the above block is:

The JS is also a lot easier to edit, having about a third of the lines of the Python version, and being better-designed in general.

Below will be the code for the JS version. It will look a bit weird because it's not in a code tag, but that's so it can be easily put into an HTML document. More details on that can be found on the “How To Use” page.

“use strict”;

const mmws = {};

// Internal use
mmws._regexNotInString = (re) =>
new RegExp(
`(?<!“(?:\\\\”|)*)(?:${re.source})|(?:${re.source})(?=*$)`,
[…new Set()].join(“”)
);
mmws._ruleRegex = /^*(?:\n {4}*)(?:\n {4}*|\n *)*/gm;
mmws._statementRegex = /^*$(?!\n {4})/gm;
mmws._nameTokenRegex =
/(?:#|\.|==?)+|(?:\+|>>?)|!\(|\)|"*"| +/gm;
mmws._whitespaceRegex = mmws._regexNotInString(/ +/);
mmws._replacements = [
{
replacement: /(+)\+(+)/g,
string: “$1$2”,
validation: /(+)\+(?=+)/g,
}, // plus
{
replacement: /(+)\>(+)/g,
string: “$1>$2”,
validation: /(+)\>(?=+)/g,
}, // gt
{
replacement: /(+)\>\>(+)/g,
string: “$1 $2”,
validation: /(+)\>\>(?=+)/g,
}, // gt gt
{
replacement: /(+),(+)/g,
string: “$1,$2”,
validation: /(+),(?=+)/g,
}, // comma
{
replacement: /!\((+)\)/g,
string: “:not($1)”,
validation: /!\((+)\)/g,
}, // not
{
replacement: /(?<!)+)/g,
string: “$1”,
validation: /(?<!)+)(?!)/g,
}, // colons
{
replacement: /(?<!)#(+)/g,
string: “#$1”,
validation: /(?<!)#(+)(?!)/g,
}, // ids
{
replacement: /(?<!)\.(+)/g,
string: “.$1”,
validation: /(?<!)\.(+)(?!)/g,
}, // classes
{
replacement: /\+)(“(?:\\”|+)*“)/g,
string: ”",
validation: /\+)(“(?:\\”|+)*")/g,
}, // eq
{
replacement: /\=\+)/g,
string: "",
validation: /\=\+)/g,
}, // eqeq
]; // replace with lookaheads down there
mmws._combinedReplacements = new RegExp(
“^(?:” +
mmws._replacements
.map((re) => `(?:${re.validation.source})`)
.join(“|”) +
“)+$”,
“g”
);
mmws._isValidKey = (key) =>
!!key.replace(/ /g, “”).match(mmws._combinedReplacements);
mmws._commentRegex = mmws._regexNotInString(
/\/\/(?:.|\n)*?$|\/\*(?:.|\n)*?\*\//m
);
mmws._ruleComponent = /(?<!“(?:\\”|)+);|;(?=*$)/g;
mmws._ruleSubComponent = /(?<!“(?:\\”|)+) +| +(?=*$)/g;
mmws._variableRegex = /\$(*) +(.*)/g;
mmws._embeddedCounter = 0;
mmws._inlineMMWSCounter = 0;
mmws._inlineMMWSMap = Object();

// Outside use
mmws.toObject = (code) => {
let rule, rules, statements, rulesObj;
code = code.replace(code._commentRegex, “”);
rules = .map((r) => {
return r
.toString()
.trim()
.split(“\n”)
.map((s) => s.trim());
});
statements = .map((r) =>
r.toString()
);
rulesObj = {};
for (rule of rules) {
if (!mmws._isValidKey(rule)) {
throw new Error(`Invalid rule: ${rule}`);
}
rulesObj[rule] = rule.splice(1);
}
return { statements, rulesObj };
};
mmws.toCSS = (code) => {
let cssKey,
i,
important,
isVariable,
lastValue,
propName,
rep,
resultCSS,
rule,
selector,
subrule,
vars;

if (typeof code !== “string”) {
return;
}

// Get important parts from the code
let { statements, rulesObj } = mmws.toObject(code);

// Convert to CSS syntax
let cssObj = {};
let order = ;
for (let key of Object.keys(rulesObj)) {
cssKey = key;
cssKey = cssKey.replace(mmws._whitespaceRegex, “”);
for (rep of mmws._replacements) {
cssKey = cssKey.replace(rep.replacement, rep.string);
}
if (cssKey === “html”) {
cssKey = “:root”;
}
order.push(cssKey);
cssObj = ;
for (rule of rulesObj) {
rule = rule.split(mmws._ruleComponent).map((s) =>
s
.trim()
.split(mmws._ruleSubComponent)
.map((s) => s.trim())
);
i = 0;
important = false;
lastValue = null;
isVariable = false;
for (subrule of rule) {
i++;
if (i === 1) {
if (subrule === “!”) {
important = true;
subrule = subrule.slice(1);
}
propName = subrule;
if (propName === “$”) {
propName = `–${propName.slice(1)}`;
isVariable = true;
}
subrule = subrule.splice(1);
subrule = subrule.map((s) =>
s.replace(/\$(+)/, “var(–$1)”)
);
if (subrule.length) {
cssObj.push(
`${propName}:${subrule.join(“ ”)}${
important ? “!important” : “”
};`
);
lastValue = subrule;
}
} else {
if (isVariable) {
throw new Error(
“Variable declarations can't have special rules”
);
}
if (!order.includes(`${cssKey}:${subrule}`)) {
cssObj[`${cssKey}:${subrule}`] = ;
order.push(`${cssKey}:${subrule}`);
selector = subrule;
}
subrule = subrule.splice(1);
if (subrule.length) {
cssObj.push(
`${propName}:${subrule.join(“ ”)}${
important ? “!important” : “”
};`
);
lastValue = subrule;
} else if (lastValue !== null) {
cssObj.push(
`${propName}:${lastValue.join(“”)}${
important ? “!important” : “”
};`
);
} else {
throw new Error(“Decelerations can't be empty.”);
}
}
}
}
}

// Add the statements to CSS
if (statements.some((s) => s.startsWith(“$”))) {
if (!order.includes(“:root”)) {
order = ;
cssObj = ;
}
vars = statements.filter((s) => s.match(mmws._variableRegex));
vars = vars.map((v) => v.replace(mmws._variableRegex, “–$1: $2;”));
cssObj.push(…vars);
}

// Convert to CSS
resultCSS = “”;
for (let key of order) {
if (cssObj.length) {
resultCSS += `${key}{${cssObj.join(“”)}}`;
}
}

return resultCSS;
};
mmws.convertTagsToCSS = async function (ignoreNonexistentFiles) {
let cssCode, element, fileName, mmwsCode, response, styleEl;

for (element of [
…document.querySelectorAll(“mmws”),
…document.querySelectorAll('style'),
]) {
fileName = element.getAttribute(“src”);
if (fileName === null || element.tagName === “STYLE”) {
mmwsCode = element.innerHTML;
mmwsCode = mmwsCode
.replaceAll(/^\/\*/g, “”)
.replaceAll(/\*\/$/g, “”)
.split(“\n”)
.filter(© => c.trim())
.join(“\n”);
mmwsCode = mmwsCode
.split(“\n”)
.map((s) =>
s.replace(
new RegExp(
`^ {${Math.min(
….map(
(e) => e.length
)
)}}`,
“gm”
),
“”
)
)
.join(“\n”);
mmws._embeddedCounter++;
fileName = `embedded-${mmws._embeddedCounter}`;
} else {
response = await fetch(fileName);
if (response.status === 404) {
if (ignoreNonexistentFiles) {
throw new Error(`${fileName} does not exist.`);
}
}
mmwsCode = await response.text();
}
cssCode = mmws.toCSS(mmwsCode);
if (cssCode !== null) {
styleEl = document.createElement(“style”);
styleEl.classList.add(“–mmws”);
styleEl.id = `–mmws-from-${fileName.replace(//gi, “-”)}`;
styleEl.innerHTML = cssCode;
document.head.appendChild(styleEl);
}
element.remove();
}
};
mmws.convertInlineMMWS = () => {
let element, mmwsCode, cachedIds, resultCSS;

resultCSS = “”;
cachedIds = Object.keys(mmws._inlineMMWSMap);
for (element of document.querySelectorAll("“)) {
mmwsCode = element.getAttribute(”mmws");
if (element.id) {
if (
cachedIds.includes(element.id) &&
mmws._inlineMMWSMap === mmwsCode
) {
resultCSS += mmws._inlineMMWSMap;
continue;
}
} else {
while (
document.querySelector(
`#–mmws-inline${mmws._inlineMMWSCounter.toString(16)}`
)
) {
mmws._inlineMMWSCounter++;
}
element.id = `–mmws-inline-${mmws._inlineMMWSCounter.toString(
16
)}`;
}
let editedMMWSCode =
`#${element.id}\n` +
mmwsCode
.split(mmws._regexNotInString(/\|/g))
.map((s) => s.trim())
.map((s) => ` ${s}`)
.join(“\n”);
let cssCode = mmws.toCSS(editedMMWSCode);
resultCSS += cssCode;
mmws._inlineMMWSMap = ;
}

if (!document.querySelector(“#–mmws-inline-style”)) {
element = document.createElement(“style”);
element.id = “–mmws-inline-style”;
document.head.appendChild(element);
}
if (
document.querySelector(“#–mmws-inline-style”).innerHTML !== resultCSS
) {
document.querySelector(“#–mmws-inline-style”).innerHTML = resultCSS;
}
};

mmws.convertTagsToCSS(true);
setInterval(mmws.convertInlineMMWS);

I may have completely forgot to implement variables in the JS version. Just maybe.

But… framework… language.. in.. JS? What? Typo?

MagicCrayon9342 wrote:

(#69)
But… framework… language.. in.. JS? What? Typo?

…?

mybearworld wrote:

MagicCrayon9342 wrote:

(#69)
But… framework… language.. in.. JS? What? Typo?

…?

I'm pretty sure a language in JS is impossible.

MagicCrayon9342 wrote:

I'm pretty sure a language in JS is impossible.

Why would it be?

MagicCrayon9342 wrote:

(#71)

mybearworld wrote:

MagicCrayon9342 wrote:

(#69)
But… framework… language.. in.. JS? What? Typo?

…?

I'm pretty sure a language in JS is impossible.

typescript

MagicCrayon9342 wrote:

mybearworld wrote:

MagicCrayon9342 wrote:

(#69)
But… framework… language.. in.. JS? What? Typo?

…?

I'm pretty sure a language in JS is impossible.

What in the world would make you think that? If people can make languages in Scratch, how would it be impossible to make one in JavaScript?

NFlex23 wrote:

(#74)

MagicCrayon9342 wrote:

mybearworld wrote:

MagicCrayon9342 wrote:

(#69)
But… framework… language.. in.. JS? What? Typo?

…?

I'm pretty sure a language in JS is impossible.

What in the world would make you think that? If people can make languages in Scratch, how would it be impossible to make one in JavaScript?

Especially if it's just a styling language…

Huge question, why isn't this on NPM?

MagicCrayon9342 wrote:

Huge question, why isn't this on NPM?

I don't think making this into a NPM module is really necessary for this type of project.

NFlex23 wrote:

MagicCrayon9342 wrote:

Huge question, why isn't this on NPM?

I don't think making this into a NPM module is really necessary for this type of project.

It's far superior than hosting the file using a Scratch URL that is very obviously not made to do such a thing.

I think you mean ‘mmws’ not ‘mwws’ in your code?

Also will this be also in the VSCode extension (syntax highlighting for mmws elements in HTML)

god286 wrote:

I think you mean ‘mmws’ not ‘mwws’ in your code?

Also will this be also in the VSCode extension (syntax highlighting for mmws elements in HTML)

vscode extension installer fails