Skip to content

use copy-webpack-plugin to deliver all static assets #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 28, 2021

Conversation

aruniverse
Copy link
Member

use copy-webpack-plugin to deliver all static assets.
this also works with the dev server, so strings should finally be localized there!

… with the dev server, so strings should finally be localized there!
@aruniverse aruniverse requested a review from wgoehrig April 15, 2021 21:15
@aruniverse aruniverse changed the title use copy-webpack-plugin to deliver all static asset use copy-webpack-plugin to deliver all static assets Apr 15, 2021
@aruniverse
Copy link
Member Author

aruniverse commented Apr 15, 2021

Need to confirm this works in a monorepo...

Edit:
tested this in the itwin-viewer repo with rush and it worked

@aruniverse
Copy link
Member Author

Later on, we should create a PsuedoLocalizationPlugin to use in the dev server. Some pkgs in core deliver psuedo-localized files, most dont. imo, we should just have our pkgs deliver the en translation and dev webpack server could psuedo-localize everything for the user

@aruniverse aruniverse requested a review from StefanRetief April 28, 2021 14:27
@aruniverse
Copy link
Member Author

Saw this issue, iTwin/itwinjs-core#406, which we might be able to close with this pr too.

Copy link
Member

@calebmshafer calebmshafer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good overall, thanks for picking this up. We've been talking about making the change for a while.

I did leave a comment about still keeping all of the logic within the webpack plugin delivered via webpack-tools-core.

@calebmshafer
Copy link
Member

Later on, we should create a PsuedoLocalizationPlugin to use in the dev server. Some pkgs in core deliver psuedo-localized files, most dont. imo, we should just have our pkgs deliver the en translation and dev webpack server could psuedo-localize everything for the user

@aruniverse I like this idea. It'd make our packages smaller and avoid them being copied into production builds, which they are today. This should be fairly straightforward to do, let me see if I can quickly knock that implementation out.

@aruniverse
Copy link
Member Author

Later on, we should create a PsuedoLocalizationPlugin to use in the dev server. Some pkgs in core deliver psuedo-localized files, most dont. imo, we should just have our pkgs deliver the en translation and dev webpack server could psuedo-localize everything for the user

@aruniverse I like this idea. It'd make our packages smaller and avoid them being copied into production builds, which they are today. This should be fairly straightforward to do, let me see if I can quickly knock that implementation out.

I haven't tried this yet, but there is a transform function that we might able to make use of. Ideally we would also flag the psuedo-localization too, so users can opt out of it

@aruniverse
Copy link
Member Author

Later on, we should create a PsuedoLocalizationPlugin to use in the dev server. Some pkgs in core deliver psuedo-localized files, most dont. imo, we should just have our pkgs deliver the en translation and dev webpack server could psuedo-localize everything for the user

@aruniverse I like this idea. It'd make our packages smaller and avoid them being copied into production builds, which they are today. This should be fairly straightforward to do, let me see if I can quickly knock that implementation out.

I haven't tried this yet, but there is a transform function that we might able to make use of. Ideally we would also flag the psuedo-localization too, so users can opt out of it

Can confirm, can localize using the transform function.

            transform(content, absoluteFrom) {
              if (!/(public\\locales\\en\\)(.*)(\.json)/.exec(absoluteFrom)) {
                return content;
              }

              console.log(`Psuedolocalizing: ${absoluteFrom}`)

              const replacements = {
                A: "\u00C0\u00C1,\u00C2\u00C3,\u00C4\u00C5",
                a: "\u00E0\u00E1\u00E2\u00E3\u00E4\u00E5",
                B: "\u00DF",
                c: "\u00A2\u00E7",
                C: "\u00C7\u0028",
                D: "\u00D0",
                E: "\u00C8\u00C9\u00CA\u00CB",
                e: "\u00E8\u00E9\u00EA\u00EB",
                I: "\u00CC\u00CD\u00CE\u00CF",
                i: "\u00EC\u00ED\u00EE\u00EF",
                L: "\u00A3",
                N: "\u00D1",
                n: "\u00F1",
                O: "\u00D2\u00D3\u00D4\u00D5\u00D6",
                o: "\u00F2\u00F3\u00F4\u00F5\u00F6\u00F8",
                S: "\u0024\u00A7",
                U: "\u00D9\u00DA\u00DB\u00DC",
                u: "\u00B5\u00F9\u00FA\u00FB\u00FC",
                x: "\u00D7",
                Y: "\u00DD\u00A5",
                y: "\u00FD\u00FF",
              };

              /** PseudoLocalizes a single string */
              function pseudoLocalize(inputString) {
                let inReplace = 0;
                let outString = "";
                let replaceIndex = 0; // Note: the pseudoLocalize algorithm would normally use random, but here we cycle through because Javascript doesn't allow setting of the seed for Math.random.
                for (let iChar = 0; iChar < inputString.length; iChar++) {
                  let thisChar = inputString.charAt(iChar);
                  let nextChar = ((iChar + 1) < inputString.length) ? inputString.charAt(iChar + 1) : 0;

                  // handle the {{ and }} delimiters for placeholders - don't want to do anything to characters in between.
                  if (('{' === thisChar) && ('{' === nextChar)) {
                    inReplace++;
                    iChar++;
                    outString = outString.concat("{{");
                  } else if (('}' === thisChar) && ('}' === nextChar) && (inReplace > 0)) {
                    inReplace--;
                    iChar++;
                    outString = outString.concat("}}");
                  } else {
                    let replacementChar = thisChar;
                    if (0 === inReplace) {
                      let replacementsForChar = replacements[thisChar];
                      if (undefined !== replacementsForChar) {
                        replacementChar = replacementsForChar.charAt(replaceIndex++ % replacementsForChar.length);
                      }
                    }
                    outString = outString.concat(replacementChar);
                  }
                }
                return outString;
              }

              function pseudoLocalizeObject(objIn) {
                let objOut = {};
                for (let prop in objIn) {
                  if (objIn.hasOwnProperty(prop)) {
                    if (typeof objIn[prop] === "string") {
                      objOut[prop] = pseudoLocalize(objIn[prop])
                    } else if (typeof objIn[prop] === "object") {
                      objOut[prop] = pseudoLocalizeObject(objIn[prop])
                    }
                  }
                }
                return objOut;
              }

              const unlocalizedJson = JSON.parse(content.toString())
              const localizedJson = pseudoLocalizeObject(unlocalizedJson)
              const localizedStrings = JSON.stringify(localizedJson)
              return Buffer.from(localizedStrings)
            },
          },

@aruniverse aruniverse requested a review from calebmshafer May 27, 2021 21:19
@aruniverse aruniverse merged commit 89e419e into imodeljs May 28, 2021
@aruniverse aruniverse deleted the deliver-assests-with-dev-server branch May 28, 2021 19:56
aruniverse added a commit that referenced this pull request Jun 14, 2021
* use CopyStaticAssetsPlugin  from bentley/webpack-tools-core that uses copy-webpack-plugin under the hood to deliver all static assets. this also works with the dev server, so strings should finally be localized there!

Co-authored-by: Arun George <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants