Skip to content

Commit

Permalink
implemented "loadExternalStyles" api. This can be used to load extern…
Browse files Browse the repository at this point in the history
…al css files
  • Loading branch information
wpdas committed Mar 8, 2024
1 parent 8ef534c commit 20e16ac
Show file tree
Hide file tree
Showing 12 changed files with 126 additions and 44 deletions.
49 changes: 49 additions & 0 deletions api.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/**
* Load external fonts using their URLs. You can use any fonts source.
*
* E.g.: Fonts source: https://www.cdnfonts.com/
*
* Usage example:
*
* ```
* const fontsLoaded = loadFonts(["https://fonts.cdnfonts.com/css/display"]);
* console.log(fontsLoaded); // true / false
* ```
*
* @returns {boolean} fonts loaded?
*/
export declare const loadFonts: (fontURLs: string[]) => boolean;

/**
* Load external css files using their URLs.
*
* Usage example:
*
* ```
* const stylesLoaded = loadExternalStyles(["https://cdn.jsdelivr.net/gh/codemirror/codemirror5/lib/codemirror.css"]);
* console.log(stylesLoaded); // true / false
* ```
*
* @returns {boolean} css files loaded?
*/
export declare const loadExternalStyles: (fontURLs: string[]) => boolean;

/**
* Call resolve or reject for a given caller
* E.g:
* ```
* const getStorage = () => Storage.get('my-key');
* const resolve = (storageData) => console.log(storageData);
* const reject = () => console.log('Error');
* const timeout = 5000; // 5sec
* promisify(getStorage, resolve, reject, timeout);
* ```
*
* Default timeout is 10 seconds
*/
export declare const promisify: (
caller: () => any,
resolve: (data: any) => void,
reject?: () => void,
_timeout?: number,
) => void;
23 changes: 23 additions & 0 deletions docs/api/load-external-styles.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
## Load External Styles (Css)

Use this feature to load external css files into your application.

`loadExternalStyles` returns a `boolean` informing whether all css files have already been loaded.

```tsx
import { loadExternalStyles } from "alem/api";

const App = () => {
const stylesLoaded = loadExternalStyles([
"https://cdn.jsdelivr.net/gh/codemirror/codemirror5/lib/codemirror.css",
]);

if (!stylesLoaded) {
return <p>Loading...</p>;
}

return <p>My Nice Content</p>;
};

export default App;
```
2 changes: 1 addition & 1 deletion docs/api/load-fonts.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ p {
```

```tsx
import { loadFonts } from "alem/theme";
import { loadFonts } from "alem/api";

const App = () => {
const fontsLoaded = loadFonts([
Expand Down
2 changes: 1 addition & 1 deletion docs/api/promisify.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
Promisify is used to check if a piece of data is present until a specific check time is reached. Basically it call resolve or reject for a given caller.

```ts
import { promisify } from "alem/utils";
import { promisify } from "alem/api";

const getStorage = () => Storage.get("my-key");
const resolve = (storageData) => console.log(storageData);
Expand Down
6 changes: 3 additions & 3 deletions docs/cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ Options:
-h, --help display help for command

Commands:
dev Run the development server
build Build the project
deploy Deploy the project
dev Run the development server
build Build the project
deploy Deploy the project
upload-metadata Upload metadata to SocialDB (app name, description, icon, tags, etc)
```

Expand Down
3 changes: 1 addition & 2 deletions index.d.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
export * from "./bos";
export * from "./router";
export * from "./store";
export * from "./theme";
export * from "./utils";
export * from "./api";
7 changes: 6 additions & 1 deletion lib/tools/stateManager.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,12 @@ State.init({
// first registered route every time a file is changed. This property enables or
// disables this behavior.
alemConfig_maintainRouteWhenDeveloping: ":::MAINTAIN_ROUTE:::", // boolean
// Fonts
// External Fonts
alemFontsLoaded: false,
alemFontsBody: "", // store fonts in css format
// External Styles
alemExternalStylesLoaded: false,
alemExternalStylesBody: "",
});

// Load previous store
Expand Down Expand Up @@ -62,6 +65,8 @@ const removeAlemPropsFromState = (stateObj) => {
delete stateObj.alemRouteBlocked;
delete stateObj.alemEnvironment;
delete stateObj.alemConfig_maintainRouteWhenDeveloping;
delete stateObj.alemExternalStylesLoaded;
delete stateObj.alemExternalStylesBody;
return stateObj;
};

Expand Down
40 changes: 40 additions & 0 deletions lib/tools/theme.jsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* OBS: I tried to create a factory function to load external things,
* but it causes the app to re-render infinitely
*/

/**
* loadFonts: load external fonts
* @param {string[]} fonts
Expand Down Expand Up @@ -29,8 +34,43 @@ const loadFonts = (fonts) => {
return state.alemFontsLoaded;
};

/**
* loadExternalStyles: load external css styles
* @param {string[]} URLs
*/
const loadExternalStyles = (URLs) => {
if (!URLs && !state.alemExternalStylesLoaded) {
return;
}

let stylesBody = "";
const totalItems = URLs.length;
let loadedCounter = 0;

const loadStyle = (styleURL) => {
asyncFetch(styleURL).then((response) => {
stylesBody += response.body;
loadedCounter += 1;

if (loadedCounter === totalItems) {
State.update({
alemExternalStylesLoaded: true,
alemExternalStylesBody: stylesBody,
});
}
});
};

URLs.forEach((styleURL) => {
loadStyle(styleURL);
});

return state.alemExternalStylesLoaded;
};

// AlemTheme to support .css files and load external fonts
const AlemTheme = styled.div`
${state.alemFontsBody}
${state.alemExternalStylesBody}
${alemCssBody}
`;
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "alem",
"description": "Create web3 applications for NEAR BOS with a focus on performance while using concepts that are based on ReactJS.",
"version": "0.0.1-alpha.15",
"version": "0.0.1-alpha.16",
"main": "main.js",
"types": "index.d.ts",
"author": "Wenderson Pires - wendersonpires.near",
Expand Down
2 changes: 1 addition & 1 deletion roadmap.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
- Implement support for Testnet.
- Implement `loadExternalStyles` API to load external css files
- Implement `loadExternalStyles` API to load external css files. - ✔
- E2E Tests
- Add parameter `parameterName` for `Routes` component. This is going to allow changing the default route param name ("path") that's used to control and watch all routes. - ✔
- Implement feature to the compiler that changes the consts/lets/vars names to avoid conflicts.
15 changes: 0 additions & 15 deletions theme.d.ts

This file was deleted.

19 changes: 0 additions & 19 deletions utils.d.ts

This file was deleted.

0 comments on commit 20e16ac

Please sign in to comment.