Autodesk Viewer Markup extension - can't compile from sources - autodesk

I'm trying to achieve similar viewer annotations like official demo:
lvm-react
I read official blog post and use files from Autodesk Extensions github:
http://adndevblog.typepad.com/cloud_and_mobile/2016/04/markup3d-sample-for-view-data-api.html
But I can't compile extensions from sources (create bundle.js). Tried just npm install, but there are many errors like:
ERROR in ./src/Viewing.Extension.VisualReport/PieChart/PieChart.js
Module not found: Error: Cannot resolve module 'EventsEmitter' in MY_FILES
and
ERROR in ./src/Viewing.Extension.StateManager/Viewing.Extension.StateManager.scss
Module parse failed: /MY_PATH/library-javascript-viewer-extensions-master/src/Viewing.Extension.StateManager/Viewing.Extension.StateManager.scss Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
I also installed webpack using npm, but without result, there are still many errors.

There was a few loaders missing from the webpack build production config. It is fixed now and you should be able to build all extensions. Please use the latest version from the repo.
When testing your extensions, I recommend you use npm run build-dev command, so the generated extensions files will not be minified and have source-map enabled, so you can easily debug them in browser console. When building for production, you can use npm run build-prod.
You can also remove the various entries from the webpack config to build only the extensions you are interested in, for example:
module.exports = {
devtool: 'eval-source-map',
entry: {
'Viewing.Extension.Markup3D':
'./src/Viewing.Extension.Markup3D/Viewing.Extension.Markup3D.js',
},
// ... rest of the config ...
You may also want to change the output path, in my config the output is outside of the extensions directory, directly in the project using them:
output: {
path: path.join(__dirname, '../../App/dynamic/extensions'),
filename: "[name]/[name].js",
libraryTarget: "umd",
library: "[name]",
watch: true
},
In addition to including the extension file to your project, you should also make sure that you include the babel polyfill (from node_modules/babel-polyfill/dist/polyfill.min.js) before any extension script.
Hope that helps, let me know if you have any further trouble using those extensions.

Related

How do I correctly start using .readthedocs.yml

I have a basic ReadTheDocs repository. As per the advice of the build page, I sought to use a .readthedocs.yml to configure it:
Configure your documentation builds! Adding a .readthedocs.yml file to your project is the recommended way to configure your documentation builds. You can declare dependencies, set up submodules, and many other great features.
I added a basic .readthedocs.yml:
version: 2
sphinx:
builder: dirhtml
fail_on_warning: true
and got a build failure:
Problem in your project's configuration. Invalid "sphinx.builder": .readthedocs.yml: Your project is configured as "Sphinx Html" in your admin dashboard, but your "sphinx.builder" key does not match.
This was surprising as it seemed contrary to the guidance in the admin dashboard at https://readthedocs.org/dashboard/PROJECTNAME/advanced/ which led me to assume that I could set whatever I liked in the admin dashboard, but it would be overridden by my .readthedocs.yml (which is the behaviour I expected and wanted):
These settings can be configured using a configuration file. That's the recommended way to set up your project. Settings in the configuration file override the settings listed here.
I updated the setting in the admin dashboard to match the .readthedocs.yml and then got a build error:
Sphinx error:
master file /home/docs/checkouts/readthedocs.org/user_builds/PROJECT_NAME/checkouts/latest/source/contents.rst not found
which looks like https://github.com/readthedocs/readthedocs.org/issues/2569 (RTD not finding Sphinx configuration) - but it's not clear why that's happening because prior to adding .readthedocs.yml, the project built just fine.
I'm struggling to model what's actually going on here:
The config file isn't acting as an "overlay" / "override" onto the web settings - as per the first error, some forms of disagreement are a build failure
It's almost like if the config file exists, the web config is ignored - this would explain the contents.rst issue arising, but this isn't consistent with the first error
Adding a python.install entry to .readthedocs.yml eventually got the site building, but it's still not clear to me if I'm generally doing the right thing, and/or how successful future config changes will be.
The reason you're getting the error is that the sphinx version you're using locally doesn't match with the version readthedocs is using at the time you initiated the build process.
See here: You can use a requirements.txt file to use the same version of sphinx you use locally. I had the same issue. I've solved it by simply adding my version Sphinx==3.1.2
Also, I added a .readthedocs.yml file in my project directory where docs/ resides, pointing to where the conf.py because
I was using an extension sphinxcontrib.napoleon which readthedocs build process fails to recognize.
Wanted readthedocsbuild process to use a specific version on Sphinx.
# .readthedocs.yml
# Read the Docs configuration file
# See https://docs.readthedocs.io/en/stable/config-file/v2.html for details
# Required
version: 1
# Build documentation in the docs/ directory with Sphinx
sphinx:
configuration: docs/source/conf.py
# Build documentation with MkDocs
#mkdocs:
# configuration: mkdocs.yml
# Optionally build your docs in additional formats such as PDF
formats:
- pdf
# Optionally set the version of Python and requirements required to build your docs
python:
version: 3.7
install:
- requirements: docs/requirements.txt
a
and added all the dependencies needed to generate the documentation in docs/requirement.txt
Babel==2.8.0
imagesize==1.2.0
readme-renderer==26.0
Sphinx==3.1.2
sphinx-argparse==0.2.5
sphinx-rtd-theme==0.5.0
sphinxcontrib-applehelp==1.0.2
sphinxcontrib-devhelp==1.0.2
sphinxcontrib-htmlhelp==1.0.3
sphinxcontrib-images==0.9.2
sphinxcontrib-jsmath==1.0.1
sphinxcontrib-napoleon==0.7
sphinxcontrib-qthelp==1.0.3
sphinxcontrib-serializinghtml==1.1.4

PhpStorm file watcher "Error: Cannot find module" with babel plugins in a rollupjs script (no executable available), plugins globally installed

I can't seem to be able to resolve this, hoping someone might be able to help.
I have configured a file watcher to check for changes in a source directory. When a change is found, it runs the following tool: -
Program: C:\xampp\htdocs\currentproject\packages\node_modules\.bin\rollup
Arguments: -c C:\xampp\htdocs\currentproject\packages\source_directory\rollup.config.js
It is finding the rollup script OK but then I run into an issue as the rollup.config.js file calls babel as a plugin: -
import babel from "rollup-plugin-babel"
plugins: [
babel({})
],
babel.config.js: -
module.exports = {
presets: [
'#babel/preset-env',
'#babel/preset-react',
],
plugins: [
"#babel/plugin-proposal-class-properties",
"babel-plugin-styled-components"
],
}
It finds this config file OK but then I get the following error: -
(plugin babel) Error: Cannot find module '#babel/plugin-proposal-class-properties' from 'C:\xampp\htdocs\currentproject'
Now I understand how to configure external tools in PhpStorm but #babel/plugin-proposal-class-properties does not have a .bin/executable, only a .js file. I have also tried installing it globally via yarn and created a Windows environment variable to point to the global yarn directory but to no avail - I still get the same error.
Can anyone help me with this?

switching from bower_components to node_modules crashes Polymer project

I have a working Polymer project when I have all my links pointing to the bower_components folder, however, when I change to node_modules I get the following message when I run
polymer serve
"Failed to load resource: the server responded with a status of 404 (Not Found)"
with the URL being:
http://127.0.0.1:8081/node_modules/#polymer/polymer/polymer.html
This is correct since the Polymer team changed polymer.html to polymer.js
However, where is this done and how can I use polymer using yarn (which saves in node_modules)?
Edit:
I think I found the culprit. When I tried to find iron-icons (mind the 's'), I could only find it on yarn which saves to node_modules. When I load the node module iron-icons I get the above-mentioned error message.
So I point to the bower_component iron-icon (mind you, no 's') but that doesn't provide the extensive library of icons I have with the yarn package:
on Yarn: https://yarnpkg.com/en/package/#polymer/iron-icons
but no such thing with Bower: https://bower.io/search/
Why?!

Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author

I'm trying to enable vue-devtools in Google Chrome. But I cannot enable it. I'm using vue.js inside the Laravel application.
My server runs using php artisan serve command.
I was seeing the error message in this question's title and this solution worked for me:
Add Vue.config.devtools = true to the file where you create the Vue instance (main.js for me).
Note that, as mentioned in this answer, you need to put the Vue.config.devtools = true line before you create your store in order for the Vuex part of the devtools to work. If you're creating your Vuex store in a separate file (e.g. store.js), you may need to have the Vue.config.devtools = true line in both your main.js file as well as the store.js file.
Below is what the changes looked like in my project:
If the page uses a production/minified build of Vue.js, devtools
inspection is disabled by default so the Vue pane won't show up.
To make it work for pages opened via file:// protocol, you need to
check "Allow access to file URLs" for this extension in Chrome's
extension management panel.
I had to restart the chrome, and it worked :-)
If your using CDN; make sure your not using a production (minified) build of the library.
Use: https://unpkg.com/vue#2.4.4/dist/vue.js
Instead of: https://unpkg.com/vue#2.4.4/dist/vue.min.js
You might need to do Ctrl+Alt+I for it to show up the first time. (Source)
Updated Aug 2022
So apparently as #kissu said, the answer below causes the released code to be an unoptimized one. This might be different than what you want if you want to check production code while being able to check Vue Dev Tools.
Just be aware of it. Unless you don't mind checking the released code in an unoptimized bundle, then the following script is fine. If you don't like the Vue.config.devtools value being static, it might be time to consider env variables or something similar.
Here's how to setup Environtment Variables in Vue
Alternative answer for Vue CLI 3.x
Besides what #NathanWailes has said, this is an alternative which allows the Dev Tools to be available through scripts instead of writing it in your main Vue entry (which is usually main.js or index.js).
You can do this by simply adding this script to package.json
scripts: {
"start:dev": "vue-cli-service build --mode=development"
}
Explanation
This was because Vue.config.devtools are set to false by default in production mode as said by this GitHub Issue. But this has a work around, simply by using --mode=development flag provided in the documentation.
Then you can run using npm run start:dev and check the file in your dist/ folder! ;)
You may use the dev version of vue.js. For example get it here: https://unpkg.com/vue#2.3.2
When using Laravel just make sure you run the proper webpack for your environment for development . Running
npm run watch
should build Vue with debug mode on. Using
npm run production
minifies Vue for production. This will save you having to remember to toggle the debug mode when building for production.
For me Installing latest Vue dev tools - link and enabling 'Allow access to file URLs' in extension settings resolved the issue.
make sure you're running a non-production build of Vue.js. https://github.com/vuejs/vue-devtools/issues/62
Just add into vue.config.js:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
delete package-lock.json, node_modules, run npm i and VueJS Devtool will be working
you could try to set environment variable NODE_ENV to 'development'
(e.g. set NODE_ENV=development on Windows or export NODE_ENV="development" under Linux)
before launching Vue dev server.
In my case for Laravel 9 fresh installation, I forgot to run sail npm run dev.
If you're using Vite you can configure your environment directory via shared options. If you change that and have NODE_ENV set to production you'll receive this message when trying to inspect your app.

How to configure package.json to add a "self compiled binary" as a dependency?

I am very new to the concept of npm-install. Please throw some insights into where I might be going wrong. I have a .js file through which I am supposed to invoke a binary with some command line arguments.I did write package.json setting the main parameter to the javascript file and I am using preinstall script that compiles the code and creates a binary that is supposed to be used by my java script file.
Couple of questions:
How do I make package.json take this compiled binary as dependency for the js file?
npm install runs fine for me but I do not see any output folder whatsoever. I was hoping it would generate a .node_module in pwd and copy the contents onto bin/ folder in that. May be, I am missing something.
npm info prepublish test#0v.0.1
npm verb from cache <pwd>/package.json
npm verb readInstalled returning test#0.0.1
npm verb exit [ 0, true ]
npm info ok
Can someone please through some insights into this issue?
You don't have to include your binary file in package.json. If you're using Express, put it in the node-modules folder within the parent directory. Otherwise, you can either specify the whole path to the file where you call it or put the file in the parent directory. For global installations, the node-modules folder is usually created at: C:\Users\[Username]\AppData\Roaming\npm\node_modules.
I figured out a way to handle it. Using a js module and using my node as required in that module causes npm to setup my node in node_modules/ folder. I used a pre-install shell script to compile my binary and used the relative path to use the binary upon execution.
Thanks for all who replied.