I want to use the new Expo Print functionality with a local HTML document:
import { Print } from 'expo';
const printDocument = require('../../../assets/printouts/document.html');
console.log(printDocument);
Print.printAsync({ html: printDocument });
When I run this with Expo, I get an error and I can see that printDocument is equal to an integer, not a string corresponding to the HTML document I’m trying to import.
On the other hand, if I try just this in React, where I use Webpack with the html-loader plugin:
const printDocument = require('../../../assets/printouts/document.html');
console.log(printDocument);
Then printDocument IS a string corresponding to the HTML document as expected.
So my conclusion is I need to configure Expo in some way to import HTML documents into Javascript strings the way html-loader does with Webpack. Any ideas how? Thanks.
Related
I want to embed an Emscripten graphical application to a Vue SPA. The output of Emscripten is a .js and a .wasm file. I cannot get rid of the javascript file and write my own because it contains the proxy for the glfw API which I'm using for input handling.
I can load the javascript (with WASM) successfully with the following code:
This code injects a new <script> tag to the DOM and loads the javascript file.
injectScript(source) {
let script = document.createElement('script');
script.type = 'text/javascript';
script.src = source;
document.head.appendChild(script);
document.head.removeChild(script);
}
// During mount
injectScript("xy.js")
I have a similar method that creates the global Module object for Emscripten using the DOM:
// template
<canvas id="canvas">
// During mount
injectCode(`
var canvas = document.getElementById('canvas');
var Module = {
canvas: canvas,
};
`);
This method works when I open the page for the first time. Since we are talking about a single page application the javascript context is kept and the same code fails to create the wasm context for the second time when I reopen the page.
I'm also interested in completely different solutions but I would like to keep glfw for input handling in the graphics code.
According to the Emscripten documentation the Module object supposed to have a destroy() method. I would try to call It when the Vue component unmounted but mine doesn't have It.
Tried to null the Module object during unmount and It didn't work.
I am able to build vue web component and load it in other pages, but I can't find document how to correctly include a UI framework. It seems the web component is under shadowDOM and import css using style tag won't work.
(Add the CDN link in the template and style is applied)
Any hint on any framework, Vuetify or Ant Design or Tailwind CSS will be appreciated.
Similar question: Vuetify build as Web component style not showing
Using custom elements without Shadow DOM is trivial. Just add like the way you do traditionally. However, with Shadow DOM, things are tricky. Only inheritable CSS styles pass through the Shadow DOM. Everything else is blocked. No straight forward integration with existing design systems (Vuetify, Ant, etc.) is not directly possible if that library is only exposing global CSS.
If the design system or a component library is exposing styles i.e. css files for individual components, then you can that with some effort.
The best solution is to use constructable stylesheet. You can use a bundler like Webpack to load the stylesheet for individual component (if and only if it is provided) as a string and feed it to the stylesheet constructor method as illustrated here.
// Read SCSS file as a raw CSS text using Webpack/Rollup/Parcel
import styleText from './my-component.scss';
const sheet = new CSSStyleSheet();sheet.replaceSync(styleText);
// Use the sheet inside the web component constructor
shadowRoot.adoptedStyleSheets = [sheet];
However, Firefox and Safari are yet to implement it.
If you need a fallback, then there are ways that are not so clean. Approach is same. Import the CSS/SCSS as a string and using the template literal, add it to the element's inner style tag.
import styleText from 'ant/button.css';
class FancyComponent extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
<!-- Styles are scoped -->
<style>
${styleText}
</style>
<div>
<p>Hello World</p>
</div>
`;
}
}
customElements.define('fancy-comp', FacyComponent);
This all relies on the assumption that ant/material/veutify is exposing styles as individual files instead of one global file.
Alternately, the browsers have started supporting the link tag inside the Shadow DOM. But again it is really useful if you have styles for individual components. Read more about that here.
I tried to initialize bootstrap tooltip in vue cli globally.
so I placed this lines of code in App.vue 'mounted hook':
let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
here I get bootstrap is undefined error.
and
this.$jQuery('[data-bs-toggle="tooltip"]').Tooltip();
has no error but doesn't work.
I import libraries in 'main.js' like so:
// popper
import popper from "vue-popperjs/dist/vue-popper.min";
// bootstrap
import bootstrap from "bootstrap/dist/css/bootstrap.rtl.min.css";
import bootstrapJs from "bootstrap/dist/js/bootstrap.min";
Vue.use(bootstrap);
Vue.use(popper);
Vue.use(bootstrapJs);
and jQuery has been imported above of all.
I'm using vuejs 2 and bootstrap 5. BS doc recommend using the first code. Maybe my approach is not the proper one to do this or my imported libraries are wrong. I can't figure out.
so any answer appreciated :-)
I want to insert content like <span class="some-class">text</span> inside tinymce editor using a button in vue js template. How could I accomplish that using the tinymce-vue wrapper?
Here's the code:
<template>
<tinymce-editor
api-key="my-api-key-here"
/>
<button #click="addContent">button</button>
</template>
import Editor from '#tinymce/tinymce-vue'
export default {
components: {
tinymceEditor: Editor
},
methods: {
addContent () {
tinymce.activeEditor.setContent('<span class="some-class">text</span>');
}
}
}
Edit:
I also installed tinymce using npm i tinymce --save and added the import import tinymce from 'tinymce/tinymce to the code above. Now I don't get the error 'tinymce' is not defined anymore, but the editor doesn't appear either.
If you want to use tinymce in vue with typscritt to set up your content and avoid the undefined error you need to import tinyMCE as
import { getTinymce } from '#tinymce/tinymce-vue/lib/cjs/main/ts/TinyMCE';
Then you can set your content
getTinymce().activeEditor.setContent('coucou');
In your event handler for the button click, you can call TinyMCE's .setContent() method to set editor content.
Here is a demo:
https://codesandbox.io/s/set-content-in-tinymce-in-vue-jzciu
Don't forget, tinymce-vue doesn't include the code for TinyMCE itself. You'll either have to use an API key (which you can get for free at tiny.cloud) or use a self-hosted installation of TinyMCE. (For more info, see Step 6, here: https://www.tiny.cloud/docs/integrations/vue/#procedure)
I finally gave up trying to get access to tinymce in Vue 3 component. It either undefined or if it is not undefined - setContent command just do nothing - no errors but still no content inserted.
I just used recommended for "#tinymce/tinymce-vue" way of data binding using v-model
It looks like this:
<Editor
v-model="someLocalVar"
api-key="no-api-key"
:init="{
plugins: 'lists link image table code help wordcount',
}"
/>
then
watch(someLocalVar, () => {
//do whatever you like with your someLocalVar
});
If you want to insert content into TinyMCE you should use its APIs to do so:
https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#setcontent
https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#insertcontent
For example:
tinymce.activeEditor.setContent('<span class="some-class">text</span>');
tinymce.activeEditor.insertContent('<span class="some-class">text</span>');
I have some PDF files that I need to display in an Aurelia View.
The files are not available by direct link
I have an API function that returns a byte array.
In ASP.Net, I have some control over the response object's headers and content type, and can BinaryWrite the contents into the response.
I can't figure out how to do this in Aurelia.
Any suggestions?
Edit:
I'm attempting to use pdf.js as suggested. Injection in Aurelia fails.
import {inject} from "aurelia-framework";
import {HttpClient} from "aurelia-fetch-client";
import {PDF} from "pdfjs-dist"
#inject(Router, HttpClient, PDF)
export class PDFView {
constructor(router, http, pdf) {
this.router = router;
this.http = http;
this.pdf = pdf;
}
The console displays this error:
Inner Error:
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
Inner Error Stack:
Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
at Container.get (http://localhost:65397/jspm_packages/npm/aurelia-dependency-injection#1.0.0-beta.1.2.3/aurelia-dependency-injection.js:480:15)
at Object.invoke (http://localhost:65397/jspm_packages/npm/aurelia-dependency-injection#1.0.0-beta.1.2.3/aurelia-dependency-injection.js:341:81)
at InvocationHandler.invoke (http://localhost:65397/jspm_packages/npm/aurelia-dependency-injection#1.0.0-beta.1.2.3/aurelia-dependency-injection.js:300:168)
at Container.invoke (http://localhost:65397/jspm_packages/npm/aurelia-dependency-injection#1.0.0-beta.1.2.3/aurelia-dependency-injection.js:564:25)
at StrategyResolver.get (http://localhost:65397/jspm_packages/npm/aurelia-dependency-injection#1.0.0-beta.1.2.3/aurelia-dependency-injection.js:127:37)
at Container.get (http://localhost:65397/jspm_packages/npm/aurelia-dependency-injection#1.0.0-beta.1.2.3/aurelia-dependency-injection.js:501:23)
at eval (http://localhost:65397/jspm_packages/npm/aurelia-templating#1.0.0-beta.1.2.7/aurelia-templating.js:3925:73)
End Inner Error Stack
------------------------------------------------
The import statement must be failing, yet pdfjs appears to load successfully as I receive status 200 for both pdfjs-dist#1.5.294.js and pdfjs when the page loads.
I can find no samples of Aurelia / pdfjs apps.
Repeating: I need to embed the stream as the PDF is not available via HTTP.
I'm not sure where to go from here
As far as I know there is nothing Aurelia-specific about loading pdf files.
You can use pdf.js. It has method getDocument that accepts binary data stored in byte array.
Then you can place a canvas inside your view, load pdf data during view activation and render pages into it using pdf.js after html is attached. For example code check answer by toddmo for this post: Pdf.js and viewer.js. Pass a stream or blob to the viewer