Skip to content

Instantly share code, notes, and snippets.

@nksaraf

nksaraf/index.d.ts

Last active December 14, 2020 05:51
Show Gist options
  • Save nksaraf/d503c5b47239149ccb9f62ffd9263072 to your computer and use it in GitHub Desktop.
Save nksaraf/d503c5b47239149ccb9f62ffd9263072 to your computer and use it in GitHub Desktop.
Download ZIP
magiql-ide
Raw
index.d.ts
interface Options {
uri: string;
cdn?: string;
version?: string;
}
export declare function renderGraphiQL(props: Options): string;
export default function renderGraphiQL(props: Options): string;
Raw
index.esm.js
import manifest from "@magiql/ide/dist/_assets/manifest.json";
import pkg from "@magiql/ide/package.json";
const html = ({ uri, cdn = "https://unpkg.com", version = pkg.version }) => `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<style>
#MAGIQL_IDE_CONFIG {
display: none;
}
</style>
<link rel="icon" href="${cdn}/@magiql/ide/dist/favicon.ico" />
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root"></div>
<div id="MAGIQL_IDE_CONFIG"></div>
<script>
console.log(window.location);
document.getElementById('MAGIQL_IDE_CONFIG').innerHTML = JSON.stringify({ uri: ${uri.startsWith('/') ? `window.location.origin + "${uri}"` : `"${uri}"`} });
</script>
<script type="module" src="${cdn}/@magiql/ide@${version}/dist/_assets/${manifest["index.js"]}"></script>
</body>
</html>
`;
export function renderGraphiQL(props) {
return html(props);
}
export default renderGraphiQL;
Raw
index.js
const manifest = require("@magiql/ide/dist/_assets/manifest.json");
const pkg = require("@magiql/ide/package.json");
const html = ({ uri, cdn = "https://unpkg.com", version = pkg.version }) => `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<style>
#MAGIQL_IDE_CONFIG {
display: none;
}
</style>
<link rel="icon" href="${cdn}/@magiql/ide/dist/favicon.ico" />
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root"></div>
<div id="MAGIQL_IDE_CONFIG"></div>
<script>
console.log(window.location);
document.getElementById('MAGIQL_IDE_CONFIG').innerHTML = JSON.stringify({ uri: ${uri.startsWith('/') ? `window.location.origin + "${uri}"` : `"${uri}"`} });
</script>
<script type="module" src="${cdn}/@magiql/ide@${version}/dist/_assets/${manifest["index.js"]}"></script>
</body>
</html>
`;
function renderGraphiQL(props) {
return html(props);
}
module.exports = {
default: renderGraphiQL,
renderGraphiQL
}
Raw
package.json
{
"name": "graphiql",
"dependencies": {
"@magiql/ide": "latest"
},
"version": "0.0.2",
"main": "index.js",
"module": "index.esm.js",
"types": "index.d.ts"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment