Feature/logo building #89

dtjones404 · 2023-01-27T21:43:55Z

build-logos script has been added, which creates a versioned CDN folder populated with APM SVGs and (optionally) commits to github. This script has been added as a step in the publish github action.

Many APM components are now capable of operating in a dual mode, where they will render raw SVG code or CDN links, depending on a prop passed by checkout-components (loadFromCDN). As an example:

// if loadFromCDN is false, IdealLogo will render <img src=(base64-encoded SVG code) />
// if loadFromCDN is true, IdealLogo will render  <img src=(cdn url) />
return IdealLogo({ logoColor, optional, loadFromCDN })

Affected components have been refactored slightly to accommodate these changes.

package.json

scripts/utils.js

* feat: flag for committing * feat: adding cdn/2.2.0-alpha.1 * chore: added commit variable and adressed review comments * chore: addressing PR comments * chore: dropped -a flag * chore: updated commit to a chore * feat: updated workflow to run buildscript

dtjones404 · 2023-01-27T21:54:51Z

force push to fix commit-lint issue

Co-authored-by: Greg Jopa <534034+gregjopa@users.noreply.github.com>

codecov · 2023-01-27T22:03:53Z

Codecov Report

Base: 67.64% // Head: 70.31% // Increases project coverage by +2.67% 🎉

Coverage data is based on head (d3e71b3) compared to base (7f96dcf).
Patch coverage: 78.52% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##             main      #89      +/-   ##
==========================================
+ Coverage   67.64%   70.31%   +2.67%     
==========================================
  Files          41       41              
  Lines         204      283      +79     
  Branches       34       35       +1     
==========================================
+ Hits          138      199      +61     
- Misses         64       81      +17     
- Partials        2        3       +1

Impacted Files	Coverage Δ
src/lib/components.jsx	`50.00% <25.00%> (-13.64%)`	⬇️
src/logos/blik/logo.jsx	`25.00% <33.33%> (+5.00%)`	⬆️
src/logos/boleto/logo.jsx	`25.00% <33.33%> (+5.00%)`	⬆️
src/logos/maxima/logo.jsx	`25.00% <33.33%> (+5.00%)`	⬆️
src/logos/oxxo/logo.jsx	`25.00% <33.33%> (+5.00%)`	⬆️
src/logos/payu/logo.jsx	`25.00% <33.33%> (+5.00%)`	⬆️
src/logos/trustly/logo.jsx	`25.00% <33.33%> (+5.00%)`	⬆️
src/logos/verkkopankki/logo.jsx	`25.00% <33.33%> (+5.00%)`	⬆️
src/lib/util.js	`75.00% <80.00%> (+3.57%)`	⬆️
src/constants.js	`100.00% <100.00%> (ø)`
... and 16 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

.github/workflows/publish.yml

gregjopa · 2023-01-31T17:13:46Z

scripts/utils.js

+  return JSON.parse(fs.readFileSync("./package.json", "utf-8"));
+}
+
+export function getNodeOps(): NodeOps {


Do we use this getNodeOps() function anywhere? If not, can we delete it?

Ah right. Should we use it to update the namespace in the CDN URL, like we do with package version? I like the idea of making it dynamic but it's another point of failure as well.

I think the .nodeops file can remain static similar to what we do in paypal/sdk-release.

I thought it might be confusing if somebody ever tried to change the namespace and the urls didn't update. I don't see why we would ever need to change the namespace, though

oh I see your point. We can keep it then to validate the namespace name since its directly tied to the cdn url.

scripts/utils.js

src/constants.js

Co-authored-by: Greg Jopa <534034+gregjopa@users.noreply.github.com>

gregjopa · 2023-01-31T19:35:56Z

package.json

@@ -21,7 +21,8 @@
    "clean": "rimraf dist coverage",
    "reinstall": "rimraf flow-typed && rimraf node_modules && npm install && flow-typed install",
    "debug": "cross-env NODE_ENV=debug",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "build-logos": "babel-node --config-file './scripts/babel.config.json' --ignore ./fake --plugins=transform-es2015-modules-commonjs ./scripts/buildLogos.js"


What does this --ignore ./fake part do? Can we remove it?

Suggested change

"build-logos": "babel-node --config-file './scripts/babel.config.json' --ignore ./fake --plugins=transform-es2015-modules-commonjs ./scripts/buildLogos.js"

"build-logos": "babel-node --config-file './scripts/babel.config.json' --plugins=transform-es2015-modules-commonjs ./scripts/buildLogos.js"

Added an ignore flag to fix an issue with babel-node:

/Users/dustijones/code/public/paypal-sdk-logos/node_modules/@krakenjs/belter/src/index.js:3 export * from "./device"; ^^^^^^

I'll see if I can find a long-term solution

Looks like it may be a bug that occurs with babel-node when you use the --config-file flag.

babel/babel#11892

Good find. We can keep this. I just wanted to understand why it is needed.

scripts/buildLogos.js

Co-authored-by: Greg Jopa <534034+gregjopa@users.noreply.github.com>

scripts/buildLogos.js

gregjopa

Amazing work! 💯

prashantjagasia · 2023-01-31T22:02:33Z

scripts/buildLogos.js

+    await $`git commit -m "chore: generate CDN packages"`;
+    await $`git push`;
+  }
+}


feat: create ugly but mostly functional buld script

4218598

dtjones404 requested a review from a team as a code owner January 27, 2023 21:43

gregjopa reviewed Jan 27, 2023

View reviewed changes

package.json Outdated Show resolved Hide resolved

gregjopa reviewed Jan 27, 2023

View reviewed changes

scripts/utils.js Outdated Show resolved Hide resolved

prashantjagasia and others added 2 commits January 27, 2023 16:53

feat: enable serving SVGs from CDN

60aec47

dtjones404 force-pushed the feature/logo-building branch from 76e528a to b2fe5cd Compare January 27, 2023 21:54

dtjones404 and others added 2 commits January 27, 2023 16:59

chore: update package.json

cce82a0

Co-authored-by: Greg Jopa <534034+gregjopa@users.noreply.github.com>

chore: replace fs-extra with fs

7961085

dtjones404 force-pushed the feature/logo-building branch from b2fe5cd to 7961085 Compare January 27, 2023 21:59

chore: programmatically update cdn url version

d80181d

dtjones404 force-pushed the feature/logo-building branch 3 times, most recently from a53bfc6 to d80181d Compare January 31, 2023 17:10

gregjopa reviewed Jan 31, 2023

View reviewed changes

.github/workflows/publish.yml Outdated Show resolved Hide resolved

gregjopa reviewed Jan 31, 2023

View reviewed changes

scripts/utils.js Outdated Show resolved Hide resolved

gregjopa reviewed Jan 31, 2023

View reviewed changes

src/constants.js Outdated Show resolved Hide resolved

dtjones404 and others added 4 commits January 31, 2023 12:18

chore: update .github/workflows/publish.yml

1837f49

Co-authored-by: Greg Jopa <534034+gregjopa@users.noreply.github.com>

chore: update src/constants.js

1238118

Co-authored-by: Greg Jopa <534034+gregjopa@users.noreply.github.com>

chore: delete util functions

294b1e2

chore: update cdn namespace programmatically

e6bfdf2

gregjopa reviewed Jan 31, 2023

View reviewed changes

scripts/buildLogos.js Outdated Show resolved Hide resolved

dtjones404 and others added 2 commits January 31, 2023 14:47

chore: update scripts/buildLogos.js

7a085c2

Co-authored-by: Greg Jopa <534034+gregjopa@users.noreply.github.com>

chore: remove dynamic url namespace updating

4d7ce02

gregjopa reviewed Jan 31, 2023

View reviewed changes

scripts/buildLogos.js Outdated Show resolved Hide resolved

chore: move comment

d3e71b3

gregjopa approved these changes Jan 31, 2023

View reviewed changes

prashantjagasia reviewed Jan 31, 2023

View reviewed changes

scripts/buildLogos.js

await $`git commit -m "chore: generate CDN packages"`;

await $`git push`;

}

}

Copy link

Contributor

prashantjagasia Jan 31, 2023

Choose a reason for hiding this comment

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

👍

gregjopa merged commit f2b6b82 into main Jan 31, 2023

This was referenced Feb 3, 2023

Feature/more cdn logos #92

Merged

chore: create logo experiment paypal/paypal-checkout-components#2080

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/logo building #89

Feature/logo building #89

dtjones404 commented Jan 27, 2023 •

edited

Loading

dtjones404 commented Jan 27, 2023

codecov bot commented Jan 27, 2023 •

edited

Loading

gregjopa Jan 31, 2023

dtjones404 Jan 31, 2023

gregjopa Jan 31, 2023

dtjones404 Jan 31, 2023

gregjopa Jan 31, 2023

gregjopa Jan 31, 2023

dtjones404 Jan 31, 2023

dtjones404 Jan 31, 2023

gregjopa Jan 31, 2023

gregjopa left a comment

prashantjagasia Jan 31, 2023

	"build-logos": "babel-node --config-file './scripts/babel.config.json' --ignore ./fake --plugins=transform-es2015-modules-commonjs ./scripts/buildLogos.js"
	"build-logos": "babel-node --config-file './scripts/babel.config.json' --plugins=transform-es2015-modules-commonjs ./scripts/buildLogos.js"

Feature/logo building #89

Feature/logo building #89

Conversation

dtjones404 commented Jan 27, 2023 • edited Loading

dtjones404 commented Jan 27, 2023

codecov bot commented Jan 27, 2023 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gregjopa left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dtjones404 commented Jan 27, 2023 •

edited

Loading

codecov bot commented Jan 27, 2023 •

edited

Loading